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以 实际 项 目 为 立足 点 ， 摸 透 Vue.js，, 无 论 是 国内 互联 网 公司 已 广泛 
拒绝 纸上谈兵 ， 桌面 端 还 是 移动 端 ， 使 用 Vue.js 开 发 ， 
帮助 你 快速 上 手 ! 让 你 从 容 面 对 ! 再 不 学 就 晚 了 ! 
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内 容 提要 


本 书 主要 介绍 Vue.js 的 使 用 方法 和 在 实际 项 目 
中 的 运用 ， 它 既 可 以 在 一 个 页 面 中 单独 使 用 ， 也 
可 以 将 整 站 都 构建 成 单 页 面 应 用 。 为 了 便于 理 
解 ， 本 书 会 从 传统 的 开发 角度 切入 ， 先 从 数据 泻 
染 、 事 件 绑 定 等 方面 介绍 在 Vue.js 中 的 使 用 方法 ， 
然后 渐进 到 Vue.js 目 号 的 特性 ， 例 如 数据 绑 定 、 过 
滤器 、 指 令 以 及 最 重要 的 组 件 部 分 。 除 了 框架 用 
法 外 ， 本 书 还 介绍 了 和 Vue.js 相 关 的 重要 插件 和 构 
建 工具 ， 这 些 工 具有 助 于 帮助 用 户 构建 一 个 完整 
的 单 页 面 应 用 ， 而 不 仅仅 是 停留 在 个 人 DEMO 阶 
段 的 试验 品 。 而 对 于 复杂 项 目 ，Vue.js 也 提供 了 对 
应 的 状态 管理 工具 Vuex， 降 低 项 目的 开发 和 维护 
成 本 。 鉴 于 完稿 前 ，Vue.js 2.0 已 正式 发 布 完毕 ， 
本 书 也 在 相关 用 法 上 对 比 了 1.0 和 2.0 的 区 别 ， 并 补 
序 了 render 国 数 和 服务 端 浑 染 等 特性 。 


本 书 适 用 于 尚未 接触 过 MVVM 类 前 闹 框 染 的 
开发 者， 或 者 初步 接触 Vue.js 的 开发 者 ， 以 及 实际 
应 用 Vue.js 开 发 项 目的 开发 者 。 
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日 
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近年 来 ， 前 端 框 染 的 发 展 依旧 火热 ， 狐 的 框 
架 和 名 词 依旧 不 停 地 出 现在 开发 者 眼前 ， 而 且 开 
发 模式 也 产生 了 一 定 的 变化 。 目 前 来 看 ， 前 端 
MVVM 和 框架 的 出 现 给 开发 痢 珊 来 了 不 小 的 便利 ， 
其 中 的 代表 束 有 Angular.js、React.js 以 及 本 书 中 将 
要 介绍 的 Vue.js。 这 些 框 架 的 产生 使 得 开发 者 能 从 
过 去 手动 维护 DOM 状 态 的 党 琐 操 作 中 解脱 出 来 ， 
尽 可 能 地 让 DOM 的 更 狐 控 作 是 目 动 的 ， 状 态 变 化 
的 时 候 就 自动 更 新 到 正确 的 状态 。 不 过 ， 产 框架 
的 引入 不 可 避免 的 束 症 学 习 成 本 的 增加 以 及 框架 
普及 性 的 问题 ， 相 对 于 Angular.js 和 React.js 而 言 ， 
Vue.js 的 学 习 曲 线 则 比较 平稳 。 目 前 在 GitHub 上 已 
经 获得 了 超过 30000 的 star， 成 为 了 时 下 无 论 从 实 
用 性 还 是 普遍 性 来 说 都 是 可 徘 的 MVVM 和 框架 选择 


Ne 


自 次 昕 说 Vue.js 的 上 时候， 都 是 介绍 说 体积 小 、 
适合 移动 端 、 使 用 向 单 ， 等 等 。 但 一 开始 对 于 新 
框 碎 我 一 直 持 观望 态度 ， 毕 竟 前 端 框架 更 新 太 
快 ， 而 且 这 又 是 个 个 人 项 目 ， 仅 由 作者 尤 雨 汇 一 
人 维护 ， 不 像 Angularjs 和 React.js 那 样 有 公司 文 
持 。 后 来 为 了 解决 一 个 移动 端的 项 目 ， 我 才 正式 
接触 了 Vue.js。 由 于 项 目 本 号 天 然 存 在 组 件 这 个 概 


念 ， 并 且 和 需要 在 手机 上 运行 ， 调 人 研 后 觉得 应 该 没 
有 比 Vue.js 更 适合 的 工具 了。 在 使 用 过 程 中 ， 还 渐 
体会 到 了 Vue.js 的 便利 ， 数 据 绑 定 及 组 件 系统 对 于 
提 局 开发 效率 和 代码 复 用 性 来 说 都 有 相当 大 的 帮 
助 ， 并 且 初 期 对 线 上 项 目 使 用 这 种 新 框架 的 顾虑 
也 渐渐 消除 了 ， 即 使 随 看 后 期 复杂 度 的 增加 也 并 
没有 对 项 目的 开发 和 维护 成 本 造成 影响 。 


本 书 主 要 从 我 目 喘 的 学 习 和 开发 经 验 出 发 ， 
介绍 了 Vue.js 的 基础 用 法 和 特性 ， 包 括 Vue.js 的 一 
些 插 件 用 法 ， 用 于 解决 客户 咽 路 由 和 大 规模 状态 
管理 ， 以 及 打包 发 布 等 构建 工具 ， 便 于 正式 用 于 
线 上 环境 。 


最 后 ， 感谢 Vue.js 作 者 尤 雨 溪 匈 生 为 前 端 开 发 
者 提供 了 这 球 优 秀 的 框架 ， 使 得 开发 者 能 够 更 好 
地 应 对 项 目 复 杂 度 ; 也 感谢 人 民 邮 电 出 版 社 的 大 
力 支 持 ， 写 书 的 过 程 的 确 对 人 是 一 种 折磨 和 考 
验 ， 最 后 感谢 每 天 早上 4 扣 多 就 开始 叫 我 起 床 的 两 
os 它们 对 本 书 的 进度 的 确 起 到 了 很 好 的 推动 
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近 几 年 ， 互 联网 前 问 行 业 发 展 得 依旧 迅 独 ， 
涌现 出 了 很 多 优秀 的 框架 ， 同 时 这 些 框架 也 正在 
偿 光 改变 我 们 传统 的 前 闹 开 发 方式 。Google 的 
AngularJS、Facebook 的 ReactJS， 这 些 前 端 MVC 
(MVVM) 框架 的 出 现 和 组 件 化 开发 的 普及 和 规 
苑 化 ， 既 改变 了 原 有 的 开发 思维 和 方式 ， 也 使 得 
前 问 开 发 者 加 快 脚步 ， 更 新 目 己 的 知识 结构 。 
2014 年 2 月 ， 原 Google 员 工 尤 雨 溪 公 开发 布 了 自己 
的 前 闹 库 一 一 Vue.js， 时 罕 今日 ，Vue.js 在 GitHub 
上 已 经 收获 超过 30000star， 而 且 也 有 越 来 越 多 的 
开发 者 在 实际 的 生产 环境 中 运用 它 。 


本 书 主要 以 Vue.js 1.0.26 版 本 为 基准 进行 说 
明 ，Vue.js 2.0 版 本 与 之 不 同 的 地 方 ， 会 在 对 应 章 
节 中 说 明 。 


1.1 Vue.js 是 什么 


单独 来 讲 ，Vue.js 被 定义 成 一 个 用 来 开发 Web 
界面 的 前 问 库 ， 是 个 非常 轻 量 级 的 工具 。Vue.js 本 
身 具 有 响应 式 编程 和 组 件 化 的 特点 。 


所 请 啊 应 式 编 程 , 即 为 你 持 状 态 和 视图 的 同 

步 ， 这 个 在 大 多 数 前 问 MV* 

(MVC/MVVM/MVW) 框 狠 ， 不 管 是 早期 的 
backbone.js 还 是 现在 AngularJS 都 对 这 一 特性 进行 
了 实现 〈 也 称 之 为 数据 绑 定 ) ， 但 这 几 者 的 实现 
方式 和 使 用 方式 都 不 相同 。 相 比 而 言 ，Vue.js 使 用 
起 来 更 为 众 单 ， 也 无 需 引 入 太 多 的 新 概念 ， 声 明 
实例 new Vue({ data : data }) 后 目 然 对 data 里 面 的 数 
据 进 行 了 视图 上 的 绑 定 。 修 改 data 的 数据 ， 视 图 
中 对 应 数据 也 会 随 之 更 改 。 


Vue.js 的 组 件 化 理念 和 ReactJS 异 曲 同 工 

一 一 “一 切 都 是 组 件 ”， 可 以 将 任意 封装 好 的 代码 
注册 成 标签， 例如 : Vue.component(Cexample'， 
Example)， 可 以 在 模板 中 以 <example></example> 
的 形式 调用 。 如 琳 组 件 抽 象 得 合理 ， 这 在 很 大 程 
上 度 上 能 减少 重复 开发 ， 而 且 配 合 Vue.js 的 周边 工具 
vue-loader， 我 们 可 以 将 一 个 组 件 的 CSS、HTML 
和 js 都 写 在 一 个 文件 里 ， 做 到 模块 化 的 开发 。 


除 此 之 外 ，Vue.js 也 可 以 和 一 些 周边 工具 配合 
起 来 ， 例 如 vue-router 和 和 vue-resource， 支 持 了 路 由 
和 异步 请 求 ， 这 样 束 满足 了 开发 早 页 面 应 用 的 基 
本 条 件 。 


1.2 为 什么 要 用 Vue.js 


相 比 较 Angularjs 和 ReactJS，Vue.js 一 直 以 轻 
量 级 ， 易 上 手 被 称道 。MVVM 的 开发 模式 也 使 前 
端 从 原先 的 DOM 操 作 中 解放 出 来 ， 我 们 不 再 需要 
在 维护 视图 和 数据 的 统一 上 花 大 量 的 时 间 ， 只 需 
要 关注 于 data 的 变化 ， 代 码 变 得 更 加 容易 维护 。 
里 然 社 区 和 搬 件 并 没有 一 些 老 牌 的 开源 项 目 那 么 
丰 师 ， 但 满足 日 党 的 开发 是 没有 问题 的 。Vue.js 
2.0 也 已 经 发 布 了 beta 版 本 ， 演 染 层 基于 一 个 轻 量 
级 的 virtual-DOM 实现 ， 在 大 多 数 场 景 下 初始 化 
演 染 速度 和 内 存 消 耗 都 捉 升 了 2~4 倍 。 而 阿里 也 
开源 了 weex (可 以 理解 成 ReactJS-Native 和 ReacJS 
， 这 也 意味 着 Vue.js 在 移动 端 有 了 更 多 的 
可 能 性 。 


不过， 对 于 为 什么 要 选择 使 用 一 个 框 膝 ， 痢 
需要 建立 在 一 定 的 项 目 基础 上 。 如 采 脱 离 实际 项 
目 情 况 我 们 来 谈 某 个 框架 的 优 务 ， 以 及 是 否 采 用 
这 种 框架 ， 我 毁 得 十 不 够 户 译 的 。 


作为 狐 兴 的 前 端 框 娘 ，Vue.js 也 抛 章 了 对 IE8 
的 文 持 ， 在 移动 端 文 持 到 Android 4.2+ 和 iOS 7+。 
所 以 如 果 你 在 一 家 比较 传统 ， 还 需要 支持 IE6 的 公 
本 的话 ， 你 或 许 束 可 以 考虑 其 他 的 解决 方案 了 
(或 者 说 服 你 的 老板 ) 。 另 外 ， 在 传统 的 前 后 端 


混合 〈 通 过 后 端 模板 引擎 深 染 ) 的 项 目 中 ，Vue.js 

会 受到 一 定 的 限制 ，Vue 实 例 只 能 和 后 端 模板 
文件 混合 在 一 起 ， 获 取 的 数据 也 需要 依赖 于 后 端 
的 演 染 ， 这 在 处 理 一 些 JSON 对 象 和 数组 的 时 候 会 
有 些 厅 烦 。 


理想 状态 下 ， 我 们 能 直接 在 前 后 端 分 离 的 新 
项 目 中 使 用 Vue.js 最 合适 。 这 能 最 大 程度 上 发 挥 
Vue.js 的 优势 和 特性 ， 熟 悉 后 能 极 大 的 提升 我 们 的 
开发 效率 以 及 代码 的 复 用 率 。 尤 其 是 移动 浏览 絮 
上 ，vVue.js 压 缩 后 只 有 18KB， 而 且 没 有 其 他 的 依 


顿 。 


1.3 Vue.js 的 Hello world 


现在 来 看 一 下 我 们 第 一 个 Vue.js 项 目 ， 按 照 传 
统 ， 我 们 来 写 一 个 Hello World 。 


首先 ， 引 入 Vue.js 的 方式 有 很 多 ， 你 可 以 采用 
直接 使 用 CDN， 例 如 : 


<script 


src='http://cdnjs.cloudflare.com/ajax/1ibs/vue/1. 
0.26/vue .min.js'></script> 


npm install vue // 最 新 稳定 版 本 


正确 引入 Vue.js 之 后 ， 我 们 在 HTML 文 件 中 的 
内 容 为 : 


<div id="app"> 
<hi>{{message}}</h1> 
</div> 


应 用 的 js 如 下 : 


var vm = new Vuel(t 
el : '#app', 
data: { 


message : 'Hello world, I am Vue.js' 


} 
}); 


输出 结 来 为 : 


Hello world, I am Vue.js 


这 种 形式 类 似 于 前 闹 模 板 引 敬 ， 我 们 把 js 中 
message 全 和 销 换 了 HTML 模 板 中 {{message}} 这 部 
2 o 


不 过 ， 如 宁 仅 仅 是 这 样 的 例子 ， 我 相信 你 也 
\ 会 有 什么 兴趣 去 使 用 Vue.js。 根 据 上 文 对 Vue.js 
的 说 明 ， 我 们 继续 写 两 个 有 天 于 它 特性 的 例子 。 


第 一 个 特性 是 效 据 绑 定 ， 我 们 可 以 在 运行 上 
述 例子 的 浏览 器 控制 台 (console) 环境 中 输入 
vm.message = 'Hello Vue.js'， 输 出 结果 束 变 为 了 
Hello Vue.js°。 也 就 说 明 vm.message 和 视图 中 的 
{{fmessage}} 是 绑 定 的 ， 我 们 无 需 手 动 去 获取 <h1> 
标签 来 修改 里 面 的 innerHTML 。 


同样 ， 我 们 也 可 以 绑 定 用 户 输入 的 数据 ， 视 
色 会 随 看 用 户 的 输入 而 变化 ， 例 如 : 


<div id="app"> 
<h1i>Your input is {{ message }}</h1> 
<input type=”text” v-model=”message”> 
</div> 


Your input is Hello, World 


Hello, Worlid| 


vm.message 的 值 会 随 看 用 户 在 input 中 输入 的 
值 的 变化 而 变化 ， 而 无 需 我 们 手动 去 获取 DOM 元 
素 的 值 再 同步 到 js 中 。 


第 二 个 特性 是 组 件 化 ， 人 简单 来 说 我 们 可 以 目 
己 定义 HTML 标 侈 ， 并 在 模板 中 使 用 它 ， 例 如 : 


<div id="app"> 
<message content='Hello World'></message> 
</div> 


<script type="text/javascript"> 
Var Message = Vue.extend({ 
props : ['content'], 
template : '<hi>{{content}}</hi>' 
}) 
Vue.component('message', Message); 
var vm = new Vuel(t{ 
el : '#app', 


</script> 


我 们 在 浏 喃 欠 里 最 终 看 到 的 HTML 结 末 为 : 


div 1d= app 
hi>Hello World</hi 
/div 


可 以 看 到 自 定义 的 标签 <message> 被 替换 成 了 
<h1>Hello World</h1>， 当 然 ， 实 际 中 的 组 件 化 远 
比 示 例 复杂 ， 我 们 会 给 组 件 添加 参数 及 方法 ， 使 
之 能 更 好 地 被 复 用 。 


如 果 说 这 几 个 例子 引起 了 你 对 Vuejs 的 兴趣 的 
话 ， 那 接 下 来 我 们 就 会 详细 地 说 明 它 的 基础 用 法 
和 应 用 场景 ， 以 及 最 终 我 们 如 何 将 它 真实 地 运用 
到 生产 环境 中 。 


第 2 章 ”基础 特性 


其 实 ， 无 论 前 端 框架 如 何 变 化 ， 它 需要 处 理 
1 “事件 绑 定 、 处 理 用 户 区 

互 〈 输 入 信息 或 鼠标 操作 ) ， 只 不 过 提供 了 不 同 
的 写法 和 理念 。Vue.js 则 会 通过 声明 一 个 实例 new 
Vue({.…}) 标 记 当 前 页 面 的 HTML 结 构 、 数 据 的 展 
示 及 相关 事件 的 绑 定 。 本 章 主 要 介绍 Vue.js 的 构造 
函数 的 选项 对 象 及 用 法 ， 以 有 如 何 通过 Vue .js 来 实 
现 上 还 的 当 规 前 闹 功 能 。 


2.1 ”实例 及 选项 


从 以 前 的 例子 可 以 看 出 ，Vue.js 的 使 用 都 是 通 
过 构造 男 数 Vue({option}) 创 建 一 个 Vue 的 实例 : var 
vm = new Vue({})°。 一 个 Vue 实 例 相 当 于 一 个 
MVVM 模 式 中 的 ViewModel， 如 图 2-1 所 示 。 


视图 模型 


模型 (Wodel) 
(ViewModel) 


展示 和 展示 逻辑 业务 逻辑 和 数据 


图 2-1 


在 实例 化 的 时 候 ， 我 们 可 以 传 入 一 个 选项 对 
象 ， 包 含 数据 、 模 板 、 挂 载 元 系 、 方 法 、 和 生命 周 
期 钨 子 等 过 项 。 下 面 束 对 一 些 音 用 的 挝 项 对 象 属 
性 进行 具体 的 说 明 。 


2.1.1 模板 


选项 中 主要 影响 模板 或 DOM 的 选项 有 el 和 
template， 属 性 replace 和 template 需 要 一 起 使 用 。 


el: 类 型 为 字符 串 ，DOM 元 素 或 函数 。 其 作 
用 是 为 实例 提供 挂 载 元 素 。 一 般 来 说 我 们 会 使 用 
css 选 择 符 ， 或 者 原生 的 DOM 元 素 。 例 如 
el:#app'。 在 初始 项 中 指定 了 el， 实 例 将 立即 进入 
编译 过 程 。 


template: 类 型 为 字符 串 。 罗 认 会 将 template 
值 奉 换 挂 载 元 素 〈 即 el 值 对 应 的 元 素 ) ， 并 合并 挂 
载 元 素 和 模板 根 广 点 的 属性 《如果 属性 具有 唯一 
性 ， 类 似 id， 则 以 模板 根 和 点 为 准 ) 。 如 果 replace 
为 false， 模 板 template 的 值 将 插入 挂 载 元 系 内 。 通 
过 template 择 入 模板 的 时 候 ， 挂 载 元 陛 的 内 容 都 将 
被 互联 ， 除 非 使 用 slot 进 行 分 发 (有关 slot 内 容 将 
在 第 6 章 组 件 中 介绍 ) 。 在 使 用 template 时 ， 我 们 
往往 不 会 把 所 有 的 HIML 字 符 串 直接 写 在 js 里 面 ， 


这 样 影 响 可 读 性 而 且 也 不 利于 维护 。 所 以 经 稼 
用 '#tpl' 的 方式 赋值 ， 并 有 旦 在 body 内 容 添 加 <scrip 
id="tpl" type="x-template"> 为 标签 包含 的 HTML 内 
这 样 就 能 将 HTML 从 js 中 分 离开 来 ， 示 例如 


<div id="app"> 
<p>123</p> 
</div> 
<script id="tpl" type="x-template"> 
<div class='tpl'> 
<p>This is a tpl from script tag</p> 
</div> 
</script> 
<script type="text/javascript"> 
var vm = new Vue({ 
el : '#app', 
template : '#tpl' 
}); 


</script> 


最 终 输出 HTML 结 构 为 : 


v<div class="tpl" id="app 
p>This is a tpl from script tag</p 
/div 


Vue.js 2.0 中 废除 了 replace 这 个 参数 ， 并 且 强 
制 要 求 每 一 个 Vue.js 实 例 需 要 有 一 个 根 元 素 ， 即 不 
人 允许 组 件 模 板 为 : 


<script id="tpl" type="x-template"> 
<div class='tpl'> 


</div> 
<div class='tpl'> 


</div> 
</script> 


这 样 的 兄弟 和 点 为 根 和 点 的 模板 形式 ， 需 要 
改写 成 : 


<script id="tpl" type="x-template"> 
<div class=' wrapper '> 
<div class='tpl'> 


</div> 
<div class='tpl'> 
</div> 
</div> 
</script> 


2.1.2 ”数据 


Vue.js 实 例 中 可 以 通过 data 属 性 定义 数据 ， 这 
些 数据 可 以 在 实例 对 应 的 模板 中 进行 绑 定 并 使 
用 。 需 要 注意 的 是 ， 如 果 传 入 data 的 是 一 个 对 象 ， 
Vue 实 例会 代理 起 data 对 象 里 的 所 有 属性 ， 而 不 会 
对 传 入 的 对 象 进 行 瓷 拷贝 。 另 外 ， 我 们 也 可 以 引 
Vue 实 例 vm 中 的 $data 来 获取 声明 的 数据 ， 例 
中 : 


var data = { a: 1} 
var vm = new Vue(t{ 
data: data 


vm.$data === data // -> true 
vm.a === data.a // -> true 


0 


和 汪汪 


然后 在 模板 中 使 用 {{a}} 就 会 输出 vm.a 的 值 ， 
并 且 修 改 vm.a 的 值 ， 模 板 中 的 值 会 随 之 改变 ， 我 
们 也 会 称 这 个 数据 为 啊 应 式 (responsive) 数据 
人 
明 ) 。 


需要 注意 的 是 ， 只 有 初始 化 时 传 入 的 对 象 才 
古 啊 应 式 的 ， 即 在 声明 完 实 例 后 ， 再 加 上 一 句 
vm.$data.b = '2， 并 在 模板 中 使 用 {{tb}}， 这 时 征 不 
会 输出 字符 串 '2 的 。 例 如 


<div id="app"> 
<p>{{a}}</p> 
<p>{{b}}</p> 

</div> 

var vm = new Vue({ 
el : '#app', 
data : 

a :1 


}); 
vm.$data.b = 2; 


如 果 需 要 在 实例 化 之 后 加 入 啊 应 式 变 量 ， 需 
要 调用 实例 方法 $set， 例如: 


vm.$set('b', 2); 


个 过 Vue.js 并 不 推 存 这 么 做 ， 这 样 会 抛 出 一 个 


己 证人 
FT 


所 以 ， 我 们 应 尽量 在 初始 化 的 上 时候， 把 所 有 
的 变量 都 设 定好 ， 如 有 果 没 有 值 ， 也 可 以 用 
Undefined 或 null 占 位 。 


另外， 组 件 类 型 的 实例 可 以 通过 props 获 取 数 
| ， 同 data 一 样 ， 也 需要 在 初始 化 时 预 设 好 。 示 
列 : 


<my-component title='myTitle' content='myContent'> 

</my-component> 

var myComponent = Vue.component('my-component', { 
props : ['title', 'content'], 


template : '<h1i>{{title}}</h1i><p>{{content}} 
</p>'" 
}) 


我 们 也 可 以 在 上 述 组 件 类 型 实例 中 同时 使 用 
data， 但 有 两 个 地 方 需 要 注意 : GD data 的 值 必须 是 
一 个 函数 ， 并 且 返 回 值 是 原始 对 象 。 如 采 传 给 组 
件 的 data 是 一 个 原始 对 象 的 话 ， 则 在 建立 多 个 组 件 
实例 时 它们 束 会 共用 这 个 data 对 象 ， 修 改 其 中 一 个 
组 件 实例 的 数据 就 会 影响 到 其 他 组 件 实 例 的 数 
据 ， 这 显然 不 是 我 们 所 期 望 的 。(2) data 中 的 属性 
和 props 中 的 不 能 重 名 。 这 两 痢 均 会 抛 出 异 第 : 


@  [Vue rn]: The "data" option should be a function that returns a per-instance valye in vue.1.0.26.1s:1023 
compon def t 

四 [Vue warn]: Data field "titte" is already defined as a prop. To provide defayult value for vue.1.0.26.1s:1023 
a prop, use the "default" prop option; if yoy want to pass prop values to an instantiation call, use the 
"propsData” option. (found in component: <my-component>) 


所 以 正确 的 使 用 方法 如 下 : 


var MyComponent = Vue.component('my-component', { 
props : ['title', 'content'], 
data : function() { 
return { 
desc : '123' 
} 
}, 


template : '<div> \ 
<h1i>{{title}}</hi> \ 
<p>{{content}}</p> \ 
<p>{{desc}}</p> \ 
</div>" 


}) 


2.1.3 方法 


我 们 可 以 通过 选项 属性 methods 对 象 来 定义 方 
法 ， 并 且 使 用 v-on 指 令 来 监听 DOM 事 件 ， 例 如 ; 


<button v-on:click="alert"/>alert<button> 
new Vue({ 


el : '#app', 
data : {a : 1}, 
methods : { 
alert : function() { 
alert(this.a); 


另外 ，Vue.js 实 例 也 文 持 目 定 义 事件 ， 可 以 在 
初始 化 时 传 入 events 对 象 ， 通 过 实例 的 $emit 方 法 
进行 触 发 。 这 套 通 信和 机 制 弟 用 在 组 件 间 相互 通信 
的 情况 中 ， 例 如 了 于 组 件 冒 泡 般 发 父 组 件 事件 方 
法 ， 或 者 父 组 件 广播 某 个 事件 ， 了 于 组件 对 其 进行 
监听 等 。 这 里 和 匈 人 简单 说 明 下 用 法 ， 详 细 的 情况 将 
会 在 第 6 章 组 件 中 进行 说 明 。 


var vm = new Vuel({ 
el : '#app', 
data : data, 
events : { 
'event.alert' : function() { 
alert('this is event alert :' + this.a); 


/ 
vm.$emit('event.alert'); 


而 Vue.js 2.0 中 废 齐 了 events 选 项 属性 ， 不 再 
文 持 事件 广播 这 类 特性 ， 推 荐 直接 使 用 Vue 实 例 的 
全 局 方法 $on()/$emit()， 或 者 使 用 插件 Vuex 来 处 
理 。 


2.1.4 生命 周期 


Vue.js 实 例 在 创建 时 有 一 系列 的 初始 化 步 桑 ， 
例如 建立 数据 观察 ， 编 译 模板 ， 创 建 数据 绑 定 
等 。 在 此 过 程 中 ， 我 们 可 以 通过 一 些 定 义 好 的 生 
命 周 期 钧 于 函数 米 运 行业 务 逻 辑 。 例 如 : 


var vm = new Vuel(t{ 
data: { 
a: 1 


created: function () { 
console.log('created') 


} 
}) 


运行 上 述 例 子 时 ， 浏 览 絮 console 中 束 会 打印 
出 created 。 


下 图 是 实例 的 生命 周期 ， 可 以 根据 提供 的 生 
命 周 期 钩子 说 明 Vue.js 实 例 各 个 阶段 的 情况 ， 
人 2.0 对 不 少 钨 子 进行 了 修改 ， 以 下 一 并 说 
昌 日 。 


Vue.js 实例 生命 周期 ( 原 图 出 自 于 Vue.js 官 
网 ) ， 如 图 2-2 所 示 。 


new Vuel) 


初始 化 事件 


vm.$mount(el) 


手动 调用 后 才 进 入 下 一 步 


编译 模板 并 蔡 换 el 编译 el 包含 的 模板 内 容 


首次 调用 时 会 


document 


载 到 


vm.$destroy() 


解除 数据 绑 定 ， 子 组 件 
及 取消 事件 监听 


图 2-2 


init: 在 实例 开始 初始 化 时 间 步 调用 。 此 时 数 
据 观 测 、 事 件 等 都 疝 未 初始 化 。2.0 中 更 名 为 


beforeCreate ° 


created: 在 实例 创建 之 后 调用 。 此 时 已 完成 
数据 绑 定 、 事 件 方法 ， 但 疝 未 开始 DOM 编 译 ， 即 
未 挂 载 到 document 中 。 


beforeCompile: 在 DOM 编 译 前 调用 。2.0 废 弃 
了 该 方法 ， 推 存 使 用 created 。 


beforeMount: 2.0 独 增 的 生命 周期 钧 和子， 在 
mounted 之 前 运行 。 


compiled: 在 编译 结束 时 调用 。 此 时 所 有 指令 
已 生效 ， 数 据 变化 已 能 触发 DOM 更 新 ， 但 不 保证 
$el 已 插入 文档 。2.0 中 更 名 为 mounted 。 


ready: 在 编译 结束 和 $el 第 一 次 插入 文档 之 后 
调用 。2.0 废 弃 了 该 方法 ， 推 荐 使 用 mounted。 这 个 
变化 其 实 已 经 改变 了 ready 这 个 生命 周期 状态 ， 相 
当 于 取消 了 在 $el 百 次 插入 文档 后 的 钧 于 函数 。 


attached: 在 vm.$el 插 入 DOM 时 调用 ，ready 会 
在 第 一 次 attached 后 调用 。 操 作 $el 必 须 使 用 指令 或 


实例 方法 〈 例 如 $appendIo0) ， 直 接 操作 vm.$el 
` 会 触发 这 个 钓 子 。2.0 废 弃 了 该 方法 ， 推 荐 在 其 
他 钧 子 中 目 定 义 方法 检查 是 否 已 挂 载 。 


detached: 同 attached 类 似 ， 该 钧 子 在 vm.$el 从 
DOM 删 除 时 调用 ， 而 且 必 须 是 指令 或 实例 方法 。 
2.0 中 同样 上 废弃 了 该 方法 。 


beforeDestroy: 在 开始 销毁 实例 时 调用 ， 此 刻 
实例 仍然 有 歼 。 


destroyed: 在 实例 航 销 毁 之 后 调用 。 此 时 所 有 
绑 定 和 实例 指令 部 已 经 解 因 ， 子 实例 也 被 请 毁 。 


beforeUpdate: 2.0 狐 增 的 生命 周期 钧 于 ， 在 实 
例 挂 载 之 后 ， 再 次 更 新 实例 (例如 更 新 data) 时 会 
调用 该 方法 ， 此 时 疝 未 更 新 DOM 结 构 。 


updated:2.0 新 增 的 生命 周期 钧 子 ， 在 实例 挂 载 
之 后 ， 再 次 更 新 实例 并 更 新 完 DOM 结 构 后 调用 。 


activated: 2.0 狐 增 的 生命 周期 钩子 ， 需 要 配 
合 动态 组 件 keep-live 属 性 使 用 。 在 动态 组 件 初 始 化 
演 染 的 过 程 中 调用 该 方法 。 


deactivated: 2.0 狐 增 的 生命 周期 钧 子 ， 需 要 本 
合 动 态 组 件 keep-live 属 性 使 用 。 在 动态 组 件 移出 的 


过 程 中 调用 该 方法 。 


可 以 通过 写 一 个 何 早 的 demo 玉 更 消 楚 地 了 解 
内 部 的 运行 机 制 ， 代 码 如 下 : 


var vm = new Vuel({ 
el : '#app', 
init: function() { 


console.1log('init"); 

}, 

created: function() { 
console.1log('created' ) ; 

}, 

beforeCompile: function() { 
console.log('beforeCompile' ); 

}, 

compiled: function() { 
console.1log('compiled' ); 

}, 

attached: function() { 
console.1log('attached' ); 

}, 

dettached: function() { 
console.1log('dettached'); 

}, 

beforeDestroy: function() { 
console.1log('beforeDestroy' ); 

}, 

destroyed: function() { 
console.log('destroyed' ) ; 

}, 

ready: function() { 
console.1log('ready' ); 
// 组 件 完成 后 调用 $destory( ) 函 数 ， 进 行销 毁 


this.$destroy( ) ; 


} 
}); 


输出 结果 为 : 


2.2 ”数据 绑 定 


Vue.js 作为 数据 驱动 视图 的 框架 ， 我 们 站 和 完 要 
知道 的 束 古 如 何 将 数据 在 视图 中 展示 出 来 ， 传 统 
的 Web 项 目 中 ， 这 一 过 程 往 往 是 通过 后 问 模 板 引 
苟 来 进行 数据 和 视图 的 泻 染 ， 例 如 PHP 的 smarty， 
Java 的 velocity 和 freemarker。 但 这 样 导 致 鸭 情况 是 
前 后 端 语法 会 交 末 在 一 起 ， 前 端 HIML 文 件 中 需 
要 包 合 后 端 模板 引擎 的 语法 ， 而 且 泻 染 完 成 后 如 
果 需 要 再 次 修改 视图 ， 束 只 能 通过 获取 DOM 的 方 


法 进行 修改 ， 并 手动 维持 数据 和 视 匈 的 一 致 。 而 
Vue.js 的 核心 是 一 个 啊 应 式 的 数据 绑 定 系统 ， 建 立 
炙 定 后 ，DOM 将 和 数据 保持 同步 ， 这 样 束 无 需 手 
2 使 代码 能 够 更 加 傈 污 易 健 、 近 升 效 


2.2.1 ”数据 绑 定 语法 


本 小 地 主 要 介绍 Vue.js 的 数据 绑 定 语法 ， 出 现 
的 例子 会 基于 以 下 js 代码 : 


var vm = new Vuel(t{ 


: 'http:// 
: [1, 2, 3, 4, 5] 
: ['Vue1.0', 'Vue2.0'], 
: | 


: 'Vue1.0', version : 
{ name : 'Vuel1.1', version : 


1. 文本 插值 


数据 绑 定 最 基础 的 形式 就 是 文本 插值 ， 使 用 
的 是 双 大 括号 标签 {{}}， 为 “Mustache” 语 法 ( 源 目 
前 端 模板 引 警 Mustache.js) ， 示 例如 下 : 


<span>Hello {{ name }}</span> // -> Hello Vue 


Vue.js 实 例 vm 中 name 属 性 的 值 将 会 蔡 换 
Moustache 标签 中 的 name， 并 且 修 改 数 据 对 象 中 的 
name 必 性 ，DOM 也 会 随 之 更 新 。 在 浏览 右 console 
中 运行 vm.name = '"Vue 1.0'"， 输出 结果 为 Hello Vue 
1.0° 


模板 语法 同时 也 文 持 单 次 插值 ， 即 首次 赋值 
后 表 更 改 vm 实 例 属性 值 不 会 引起 DOM 变 化 , 例如 
以 下 模板 在 运行 vm.name = "Vue 1.0' 后 ， 依 旧 会 输 
出 Hello Vue: 


<span>Hello {{* name }} </span> // -> Hello Vue 


CC 


Vue.js 2.0 去 除了 {{*}} 这 种 写法 ， 采 用 v-once 
代 蔡 。 以 上 模板 需要 改写 为 <span v- once=”name”> 


{{name}}</span> ° 
2. HTML 属 性 


Moustache 标签 也 同样 适用 于 HTML 属 性 中 ， 例 
如 : 


<div id="id-{{id}}"></div> // <div id="id-1"> 
</div> 


Vue.js 2.0 中 废 齐 了 这 种 写法 ， 用 vbind 指 令 
代替 ，<div vbind:id="id- + id"/></div> 人 代替， 或 
简写 为 <div :id="id-' + id"></div> 


3. 绑 定 表达 式 


放 在 Mustache 标签 内 的 文本 内 容 称 为 绑 定 表 
达 式 。 除 了 和 直接 输出 属性 值 之 外 ， 一 段 绑 定 表 达 


陈 可 以 由 一 个 简单 的 JavaScript 表达 式 和 可 选 的 一 
个 或 多 个 过 滤 囊 构成 。 例 如: 


{{ Index + 1 }} // 1 
{{ index == 0? 'a' : 'b'}} // a 
{{ name.split('').join('|') }} // Viule 


每 个 绑 定 中 只 能 包含 蛙 个 表达 式 ， 并 不 文 持 
JavaScript 语 句 ， 否 则 Vue.js 就 会 抛 出 warning 异 
常 。 并 且 绑 定 表达 式 里 不 文 持 正则 表达 式 ， 如 琳 
需要 进行 复杂 的 转换 ， 可 以 使 用 过 滤 需 或 者 计算 
以 下 的 例子 即 为 无 效 的 表达 
I\: 


{{ var a = 1}}  // 无 效 
{{ if (ok) { return name } }} // 无 效 , 但 可 以 写成 ok 
? name : '' 或 者 ok && name 这 样 的 写法 


Vue.js 绑 定 表达 式 warning: 


@V arn]: A using d keywords p as1 Vue ,1.0.26,15:1023 
@rI arn]: A using d keywords p flinde 9) vue,1,9.26,j5;1023 
@@ FIV arn]; Invalid exp Genera funct body cope, if d 0 p Vvue,1,9,26,j5;1023 
问 
MM 
4 过 滤 


Vue.js 允许 在 表达 却 后 添加 可 选 的 过 滤 征 ， 以 
管道 符 “" 指 示 。 丰 例 : 


{{ name | uppercase }} // VUE 


Vue.js 将 name 的 值 传 入 ee 内 置 
的 过 小 絮 中 (本质 是 一 个 函数 ) ， 返 回 字 符 串 的 
“oe 。 同 时 也 允许 多 个 过 滤 厦 9 链 式 使 用 例 

: 


{{ name | filterA | filterB }} 


也 允许 传 入 多 个 参数 ， 例 如 : 


{{ name | filterA arg1 arg2 


此 时 ，filterA 将 name 的 值 做 为 第 个 参数 ， 
arg1l ， 人 \、 第 三 个 参数 传 和 人 过滤 左 函 数 
中 。 节 终 函 数 的 返回 值 即 为 输出 结 末 。arg1，arg2 
可 以 使 用 表达 式 ， 也 可 以 加 上 单 引 号 ， 直 接 传 入 
字符 串 。 例 如 : 


{{ name.split('') | limitBy 3 1 }} // ->u,e 


过 滤 絮 limitBy 可 以 接受 两 个 参数 ， 第 一 个 参 
数 是 设置 显示 个 数 ， 第 二 个 参数 为 可 选 ee 
台 元 和 聚 的 数组 下 标 。 


Vue.js 内 置 了 10 个 过 滤器 ， 下 面 信 蛙 介绍 它们 
的 功能 和 用 法 。 


@ capitalize: 字符 串 首 字符 转化 成 大 写 


@ uppercase: 字符 串 转 化 成 大 写 
@ lowercase: 字符 捉 转 化 成 小 写 
@ currency 参数 为 {String}[ 货 币 符 号 ]， 


{Number} [小 数位 ]， 将 效 字 转化 成 赁 币 符 号 ， 并 
会 目 动 添 加 数字 分 刀 号 。 例 如 : 


{{ amount | currency "至 ' 2 }} // -> 若 amount 值 为 
10000， 则 输出 半 10, 000 ,00 


@ pluralize 参数 为 {String} single, [double， 
triple]， 了 字符 串 复数 化 。 如 果 接 收 的 是 一 个 参数 ， 
那 复数 形式 吏 是 在 字符 捉 来 尾 和 直接 加 一 个 “<s”。 如 
有 末 接 收 多 个 参数 ， 则 会 极 当 成 效 组 处 理 ， 字 人 符 串 
会 添加 对 应 数组 下 标的 值 。 如 果 字 和 从 串 的 个 数 多 
2 多 出 部 分 会 都 添加 最 后 一 个 参数 的 

° 例如: 


<p v-for="c in count">{{ c | pluralize 'item' }} 
{{ c | pluralize 'st' nd 'rd' 'th' }}</p> 


和 


输出 结果 : 


litem 1st 
2items 2nd 
3items 3rd 


4items 4th 


@ json 参数 为 {Number}[indent 空 格 缩 进 数 ， 
与 JSON.stringify() 作 用 相同 ， 将 json 对 象 数 据 输出 
成 符合 json 格 式 的 字符 串 。 


@ debounce 传 入 值 必 须 是 函数 ， 参 数 可 选 ， 
为 {Number}[waitl， 即 延 时 时 长 。 作 用 是 当 调 用 画 
数 n 坚 秒 后 ， 才 会 执行 该 动作 ， 和 大 在 这 n 译 秒 内 又 
调用 此 动作 则 将 重新 计算 执行 时 间 。 例 如 : 


<input v-on:keyup ="onKeyup | debounce 500"> // 


input 元 素 上 监听 了 keyup 事 件 ， 并 且 延 迟 500ms 触 发 


limitBy 传 入 值 必须 是 数组 ， 参 数 为 
{Number}limit，{Number}[offset], limit 为 显示 个 
数 ，offset 为 开始 显示 数组 下 标 。 例 如 ; 


<div v-for="item in items | limitBy 10"></div> // 


items 为 数组 ， 且 只 显示 数组 中 的 前 十 个 元 素 


@ filterBy 传 入 信 必 须 是 数组， 参 效 为 {String 
| Function} targetStringOrFunction， 即 需要 匹配 的 
字符 串 或 范 数 〈 通 过 函数 返回 值 为 true 或 false 来 判 
断 匹 配 结果 ) ; “in”【《〈 可 选 分 陋 符 ) ; {String}[... 
searchKeys]， 为 检索 的 属性 区 域 。 示 例 : 


<p v-for="name in names | filterBy '1.0'">{{name}} 
</p> // 检索 items 数 组 中 值 包 含 1.0 的 元 素 

<p v-for="item in items | filterBy '1.0' in 
'name'">{{ item | json}}</p> // 检索 items 数 组 中 元 素 属 
性 name 值 为 1.0 的 元 又 输 出 。 检 索 区 域 也 可 以 为 数组 ， 即 in 


[name，version]， 在 多 个 属性 中 进行 检索 


上 述 两 个 例子 的 输出 结 来 为 : 


Vuel.0 


{ "name": "Vuel.0", "version": "1.0" } 


<p v-for="item in items | filterBy customFilter"> 
{{ item | json}}</p> // 使 用 自 定义 的 过 滤 画 数 ， 画 数 可 以 
在 选项 methods 中 定义 
methods : { 
customFilter : function(item) { 
if(item.name) return true // 检索 所 有 元 素 中 包含 
name 属 性 的 元 素 


} 
} 


orderBy 传 入 值 必须 是 数组 ， 参 数 为 
{String|Array|Function}sortKeys， 即 指定 排序 党 
略 。 这 里 可 以 使 用 单个 键 名 ， 也 可 以 传 入 包含 多 
个 排序 键 名 的 数组 。 也 可 以 像 Array.Sort0) 那 样 传 
入 上 自己 的 排序 策略 函数 。 第 二 个 参数 为 可 选 参数 
{String}[order]， 即 选择 升序 或 降序 ，order>=0 为 
升序 ，order<0 为 降序 。 下 面 以 三 种 不 同 的 参数 例 
子 来 说 明 具 体 的 用 法 : 


单个 键 名 : <p v-for="item in items | orderBy 'name' 
-1">{{item.name}}</p> // items 数 组 中 以 键 名 name 进 行 降 
序 排 列 


多 个 键 名 : <p v-for="item in items | orderBy 


[name,version] ">{{item.name}}</p> // 使 用 items 里 的 两 
个 键 名 进行 排序 

自 定义 排 序 函 数 : <p v-for="item in items | orderBy 
customOrder">{{item.name}} 


customOrder: function (a, b) { 
return parseFloat(a.version) > 
parseFloat(b.version) // 对 比 item 中 version 的 值 的 大 小 
进行 排序 
} 


需要 注意 的 是 ，Vue.js 2.0 中 已 经 去 除了 内 置 
的 过 滤 右 ， 但 也 不 用 担心 ， 我 们 会 在 第 4 章 中 详细 
说 明 过 沽 左上 的 用 法 ， 以 及 如 何 声明 目 定 义 过 泪 
请。 而 且 Vue.js 的 社区 中 本 壬 束 有 优秀 的 开源 过 小 
研 ， 比 如 处 理 时 间 的 moment,js， 和 货币 格式 化 处 
理 的 account.js， 我 们 会 在 第 8 章 中 说 明 如 何 使 用 
Vue.js 的 插件 有 


5. 指令 


Vue.js 也 提供 指令 (Directives) 这 一 概念 ， 可 
以 理解 为 当 表 达 式 的 值 发 生 改 变 时 ， 会 有 些 特殊 
行为 作用 到 绑 定 的 DOM 上 。 指 令 通 常会 直接 书写 
在 模板 的 HTML 元 系 中 ， 而 为 了 有 别 于 普通 的 属 
性 ，Vue.js 指 令 是 融 有 前 缀 的 v- 的 属性 。 写 法 上 来 
说 ， 指 令 的 信 限 定 为 绑 定 才 达 式 ， 所 以 上 述 捉 到 
的 JavaScript 表达 式 及 过 滤 大 规则 在 这 里 也 适用 。 
本 书 会 在 第 3 草 中 详细 讲述 指令 及 目 定 义 指 令 的 作 
°。 本 万 和 完 倍 单 介 绍 指 令 绑 定数 据 和 事件 的 语 
Y o 


@ 参数 


<img v-bind:src="avatar" /> 


指令 v-bind 可 以 在 后 面市 一 个 参数 ， 用 冒 瑟 
(:) 隔 开 ，src 即 为 参数 。 此 时 img 标 签 中 的 src 会 
与 vm 实例 中 的 avatar 绑 定 ， 等 同 于 : 


<img src="{{avatar}}" /> 


| 


@ 修 岳 符 


修饰 特 (Modifiers) 是 以 半角 句号 .开始 的 特 
殊 后 缀 ， 用 于 表示 指令 应 该 以 特殊 方式 绑 定 。 


<button v-on:click.stop="doClick"></button> 


v-on 的 作用 是 在 对 应 的 DOM 元 素 上 绑 定 事件 
监听 背 ，docClick 为 函数 名 ， 而 stop 即 为 修 师 符 ， 
作用 是 停止 冒 泡 ， 相 当 于 调用 了 e. 


stopPropagation()。 


2.2.2 ”计算 属性 


在 项 目 开 发 中 ， 我 们 展示 的 数据 往往 需要 经 
过 一 些 处 理 。 除 了 在 模板 中 绑 定 表达 式 或 者 利用 
过 滤 锅 外 ，Vue.js 还 提供 了 计算 属性 这 种 方法 ， 避 
免 在 模板 中 加 入 过 重 的 业务 逻辑 ， 傈 证 模板 的 结 
构 清 晰 和 可 维护 性 。 


1. 基础 例子 


var vm = new Vue({ 
el : '#app, 
data: { 
firstName : 'Gavin', 
lastName: 'CLY' 


computed : { 
fullName : function() { 
// this 指向 vm 实例 
return this.firstName + ' ' + this.lastName 


} 
}); 


<p>{{ firstName }}</p> // Gavin 
<p>{{ lastName }}</p> // CLY 
<p>{{ fullName }}</p> // Gavin CLY 


此 时 ， 你 对 vm.firstName 和 vm.lastrName 进 行 
修改 ， 始 终 会 影响 vm.fullName 。 


2. Setter 


如 果 说 上 面 那 个 例子 并 没有 体现 出 来 计算 属 
性 的 优势 的 话 ， 那 计算 属性 的 Setter 方 法 ， 则 在 更 


新 属性 时 给 我 们 带 来 了 便利 。 示 例 ; 


var vm = new Vue({ 
el : '#el', 
data: { 
cents : 100, 


computed : { 
price : { 
set : function(newValue) { 
this,.cents = newValue * 100; 


get : function() { 
return (this.cents / 100).toFixed(2); 


在 处 理 商 品 价格 的 时 候 ， 后 闹 往 往 会 把 价钱 
定义 成 以 分 为 单位 的 整 型 ， 避 人 免 在 处 理 浮 点 类 型 
数据 时 产生 的 问题 。 而 前 并 则 和 需要 把 价钱 再 转 成 
元 进行 展示 ， 而 且 如 来 需要 对 价钱 进行 修改 的 
话 ， 则 又 要 把 输入 的 价格 再 恢复 到 分 传 给 后 病 ， 
很 古 替 琪 。 


而 在 使 用 Vue.js 的 计算 属性 后 ， 我 们 可 以 将 
vm.cents 设置 为 后 端 所 存 的 数据 ， 计 算 属 性 price 
为 前 端 展示 和 更 新 的 数据 。 


<p>&yen;{{price}}</p> // ¥1.00 


此 时 更 改 vm.price = 2，vm.cents 会 被 更 新 为 
200， 在 传递 给 后 端 时 无 需 再 手动 转化 一 过 数据 。 


Errors Warnings Info Logs Debug Handled 


200 


2.2.3 ”表单 控件 


Vue.js 中 提供 v-model 时 指令 对 表单 元 隶 进 行 
双 回 数据 绑 定 ， 在 修改 表单 元 素 值 的 同时 ， 实 例 
vm 中 对 应 的 属性 值 也 同时 更 新 ， 反 之 亦 然 。 本 小 
广 会 介绍 主要 input 元 系 绑 定 V-model 后 的 具体 用 法 
和 处 理 方式 ， 示 例 所 依赖 的 js 代码 如 下 : 


var vm = new Vue({ 
el : '#app', 
data: { 
message : ， 
gender : '',) 


1 
7 


checked : 7 
multiChecked : [], 
selected :; ''", 

multiSelected : [|] 


1. Text 
输入 框 示 例 ， 用 户 输入 的 内 容 和 vm.message 
直接 绑 定 : 


<input type="text" v-model="message" /> 
<span>Your input is : {{ message }}</span> 


hello Your input is : hello 


2. Radio 


单 选 框 示例 : 


<label><input type="radio" value="male" Vv- 
model="gender "> 男 </lable> 

<label><input type="radio" value="female" Vv- 
model="gender "> 女 </lable> 

<p>{{ gender }}</p> 


gender 值 即 为 选中 的 radio 元 又 的 value 值 。 


本 男 个 女 male 
3. Checkbox 
Checkbox 分 两 种 情况 ， 单个 勺 选 框 和 多 个 义 
迁 框 。 


单个 勺 选 枉 ，v-model 即 为 布尔 什 ， 此 时 input 
的 value 并 不 影响 v-model 的 值 。 


<input type="checkbox" v-model="checked" /> 
<span>checked : {{ checked }}</span> 


checked : true 


多 个 勾 选 框 ，v-model 使 用 相同 的 属性 名 称 ， 
且 属 性 为 数组 。 


<label><input type="checkbox" value="1" v-model=" 
multiChecked">1</lable> 
<label><input type="checkbox" value="2" Vv-model=" 
multiChecked">2</lable> 
<label><input type="checkbox" value="3" Vv-model=" 
multiChecked">3</lable> 


<p>MultiChecked: {{ multiChecked.join('|"') }}</p> 


©@1 5273 


MultiChecked: 112 
4. Select 


同 Checkbox 元 紊 一 样 ，Select 也 分 单 选 和 多 选 
两 种 ， 多 选 的 时 候 也 需要 绑 定 到 一 个 数组 。 


<select v-model="selected"> 
<option selected>A</option> 
<option>B</option> 
<option>C</option> 

</select> 

<span>Selected: {{ selected }}</span> 


<select v-model="multiSelected" multiple> 
<option selected>A</option> 
<option>B</option> 
<option>C</option> 
</select> 
<br> 
<span>MultiSelected: {{ multiSelected.join('|') }} 
</span> 


A 图 Selected: A 


A 
B 
C 


MultiSelected: AIC 


5. 绑 定 value 


表单 控件 的 值 同 样 可 以 绑 定 在 Vue 实 例 的 动态 
属性 上 ， 用 v-bind 实 现 。 示 例 : 


1. Checkbox 


<input type="checkbox" v-model="checked" v- 


二 


bind:true-value="a" v-bind:false-value="b"> 
和 中: vm.checked == vm.a // -> true 
未 选中 : vm.checked ==vm.b // -> true 
2. Radio 


<input type="radio" v-model="checked", V- 
bind:value="a"> 


先 中 : vm.checked == vm.a // -> true 


3. Select Options 


<select v-model="selected"> 
<!-- 对 象 字面 量 --> 


<option v-bind:value="{ number: 123 
}">123</option> 


</select> 
选中 : 
typeof vm.selected// -> 'object' 
vm.selected.number // -> 123 
6 .参数 特性 


Vue.js 为 表单 控件 所 供 了 一 些 参数 ， 方 便 处 理 
菏 些 前 规 操作 。 


(D lazy 
默认 情况 下 ，v-model 在 input 事件 中 同步 输 


入 框 值 与 数据 ， 加 lazy 属 性 后 从 会 改 到 在 change 
事件 中 同步 。 


<input v-model="query" lazy /> 


@ number 


会 目 动 将 用 户 输 入 转 为 Number 类 型 ， 如 有 果 上 原 
值 转换 结果 为 NaN 则 返回 原 值 。 


<input v-model="age" number/> 


G@) debounce 


debounce 为 设置 的 最 小 延 时 ， 单 位 为 ns， 即 
为 单位 时 间 内 仅 执 行 一 次 数据 更 新 。 该 参数 往往 
人 ， 例 如 在 更 新 时 发 出 ajax 请 求 返 

症 示 信息 。 


<input v-model="query" debounce="500" /> 


| 


不 过 Vue.js 2.0 中 取消 了 lazy 和 number 作 为 参 
数 ， 用 修饰 从 (modifier) 来 代替 : 


<input v-model.1lazy="query" /> <input v- 
model.numer="age" /> 


新 增 了 trim 修 岳 符 ， 去 挥 输入 值 首 尾 罕 格 : 


<input v-model.trim="name" /> 


去 除了 debounce 这 个 参数 ， 原 因 是 无 法 监测 
到 输入 痢 数 据 ， 但 疝 未 同步 到 vm 实 例 属性 时 这 个 
状态 。 如 果 仍 有 和 需要， 官方 提供 了 手动 实现 的 例 


Fhttps://jsbin.com/zefawu/3/edit?html,output ° 


2.2.4 Class 与 Style 绑 定 


在 开发 过 程 中 ， 我 们 经 常会 遇 到 动态 添加 类 
名 或 直接 修改 内 联 样式 (例如 tab 切 换 ) 。class 和 
style 都 是 DOM 元 系 的 attribute， 我 们 当然 可 以 直接 
使 用 v-bind 对 这 两 个 属性 进行 数据 绑 定 ， 例 如 <p v- 
bind:style='style'><p>， 然 后 通过 修改 vm.style 的 值 
对 元 素 样 式 进行 修改 。 但 这 样 未 免 过 于 党 琐 而 且 
容易 出 敌 ， 所 以 Vue.js 为 这 两 个 属性 单独 做 了 增强 
处 理 ， 表 达 云 的 结 末 类 型 除了 字符 绅 之 外 ， 还 可 
以 是 对 象 和 数组 。 本 小 太 束 会 对 这 两 个 属性 具体 
的 用 法 进行 说 明 。 


1 .Class 绑 定 


目 先 说 明 的 是 class 属 性 ， 我 们 绪 定 的 数据 可 
以 是 对 象 和 数组 ， 具 体 的 语法 如 下 : 


@ 对 象 语 法 : v-bind:class 接 受 参 数 是 一 个 对 
象 ， 而 且 可 以 与 普通 的 class 属 性 共存 。 


<div class="tab" v-bind:calss="{'active' : active 
; 'UNactive' : lactive}"> 
</div> 
vm 实例 中 需要 包 合 
data : { 


active : true 


| 


演 染 结果 为 : <div class="tab active"></div> 


@ 数组 语法 : v-bind:class 也 接受 数组 作为 参 


类 Yo 


<div v-bind:class="[classA, classB]"></div> 
vm 实例 中 需要 包含 
data : { 
classA : 'class-a', 
classB : 'class-b' 


} 


演 染 结果 为 :<div class="class-a class-b"> 
</div> ° 


也 可 以 使 用 三 元 表达 式 切 换 数 组 中 的 class， 
<div v-bind:class="[classA, isB ? classB : "]"> 
</div>。 如 有 果 vm.isB = false, 则 演 染 结果 为 <div v- 
bind:class="class-a"></div> ° 


2. 内 联 样 式 绑 定 


style 属 性 绑 定 的 数据 即 为 内 联 样式 ， 同 样 具 
有 对 象 和 数组 两 种 形式 : 


由 @ 对 象 语法 : 直接 绑 定 符合 样式 属 式 的 对 


<div v-bind:style="alertStyle"></div> 
data : { 
alertStyle : { 
color : 'red', 
fontSize : '20px' 


} 
} 


除了 二 接 绑 定 对 象 外 ， 也 可 以 纯 定 单个 属性 
或 直接 使 用 字符 串 。 


<div v-bind:style="{ fontSize : 
alertStyle.fontSize, color : 'red'}"></div> 


@ 数组 语法 : v-bind:style 允许 将 多 个 样式 对 
象 细 定 到 统一 元 素 上 。 


<div v-bind:style="[ styleObjectA, styleObjectB]" 
.></div> 


3. 目 动 添加 前 绥 


在 使 用 transform 这 类 属性 时 ，v-bind:style 会 根 
据 需 要 上 自动 添加 三 两 前缀 。:style 在 运行 时 进行 前 
绥 探 测 ， 如 采 浏 览 页 厂 本 本 刁 殉 文 持 不 加 前 级 的 
css 属 性 ， 那 殴 不 会 汰 加 。 


2.3 ”模板 泻 染 


当 获 取 到 后 问 数 据 后 ， 我 们 会 把 它 按 照 一 定 
的 规则 加 载 到 写 好 的 模板 中 ， 输 出 成 在 浏 贤 絮 中 
显示 的 HTML， 这 个 过 程 就 称 之 为 泻 沫 。 向 Vue.js 
是 在 前 端 〈 即 浏览 右 内 ) 进行 的 模板 渲染 。 本 市 
主要 介绍 Vue.js 泻 桨 的 基本 语法 。 


2.3.1 ”前 后 端 演 染 对 比 


早期 的 web 项 目 一 般 是 在 服务 器 端 进行 泻 
染 ， 服 务 絮 进程 从 数据 库 获取 数据 后 ， 利 用 后 端 
模板 引擎， 其 至 于 直接 在 HTML 模 板 中 骸 入 后 端 
语言 (例如 JSP) ， 将 数据 加 载 进来 生成 HTML， 
然后 通过 网 络 传输 到 用 户 的 浏览 器 中 ， 然 后 被 浏 
完 妖 解析 成 可 见 的 页 面 。 而 前 端 泻 染 则 是 在 浏览 
器 里 利用 JS 把 数据 和 HTML 模 板 进 行 组 合 。 两 种 方 
式 各 有 目 己 的 优 缺 点 ， 需 要 更 具 目 己 的 业务 场景 
来 选择 技术 方案 。 

前 端 泻 染 的 优点 在 于 : 

@ 业务 分 离 ， 后 端 只 需要 提供 数据 接口 ， 前 
端 在 开发 时 也 不 需要 部 署 对 应 的 后 端 环境 ， 通 过 
一 些 代 理 服务 絮 工 具 束 能 远程 获取 后 端 数 据 进 行 
开发 ， 能 够 提升 开发 效率 。 


@ 计算 量 转移 ， 原 本 需要 后 端 泻 染 的 任务 转 
移 给 了 前 闹 ， 减 轻 了 服务 絮 的 压力 。 


而 后 病 泻 染 的 优点 在 于 : 
@ 对 搜索 引擎 友好 。 
@ 目 页 加 载 时 间 短 ， 后 剖 渔 染 加 载 完 成 后 束 


直接 显示 HTML， 但 前 逆 渔 沫 在 加 载 完 成 后 还 需 
要 有 有 段 js 渲染 的 了 时间。 


Vue.js 2.0 开始 文 持 服务 病 泻 染 ， 从 而 让 开发 
着 在 使 用 上 有 了 更 多 的 迹 择 。 


2.3.2 “条件 泻 染 


Vue.js 提供 v-if，v-show，v-else，v-for 这 几 个 
指令 来 说 明 模 板 和 数据 间 的 逻辑 天 系 ， 这 基本 了 驳 
构成 了 模板 引擎 的 主要 部 分 。 下 面 将 详细 说 明 这 
几 个 指令 的 用 法 和 场景 。 


1. v-if/v-else 


Vv- 站 和 和 v-else 的 作用 是 根据 数据 值 来 判断 是 否 
输出 该 DOM 元 票 ， 以 及 包含 的 于 元 素 。 例 如 : 


<div vV-if="yes">yes</div> 


如 果 当 前 vm 实例 中 包 仿 data.yes = true， 则 模 
板 引 擎 将 会 编 详 这 个 DOM 广 所， 输出 
<div>yes</div> ° 


我 们 也 可 以 利用 v-else 来 配合 v-if 使 用 。 例 
中 : 


<div V-If="yes">yeS</div> 
<div v-else>no</div> 


需要 注意 的 是 ，v-else 必 须 紧 跟 v-if， 不 然 该 
指令 不 起 作用 。 例 如 : 


<div V-If="yes">yeS</div> 
<p>the v-else div shows</p> 
<div v-else>no</div> 


最 终 这 三 个 元 和 聚 都 会 输出 显示 在 浏览 大 中 。 


v-if 绑 定 的 元 素 包 售 子 元 素 则 不 影响 和 v-else 
的 使 用 。 例 如 : 


<div v-if="yes"> 


<div v-if="inner">inner</div> 
<div v-else>not inner</div> 
</div> 
<div v-else>no</div> 
new Vuel(t{ 
data : { 
yes : true, 
inner : false 


输出 结果 为 : 


<div> 
<div>not inner></div> 
</div> 


2. v-show 


除了 v-if，v-show 也 是 可 以 根据 条 件 展 示 元 素 
的 一 种 指令 。 例 如 : 


<div VvV-show="show">show</div> 


. 也 可 以 搭配 v-else 使 用 ， 用 法 和 v- 计 ft 一致。 例 
中 : 


<div v-show="show">show</div> 
<div v-else>hidden</div> 


与 v-if 不 同 的 是 ，v-show 元 素 的 使 用 会 洽 染 并 
保持 在 DOM 中 。v-show 只 是 切换 元 素 的 css 属 性 
display。 例 如 : 


<div v-if="show">if</div> 
<div v-show="show">show</div> 


show 分 别 为 tue 时 的 结果 : 


<l— V-if vs v-show ”一 > 
div>if</div 
div>show</div 


show 分 别 为 false 肝 的 结果 : 


<!l— Vv-if vs Vv-show 一 > 
div style="display: none;">show</div 


3. Vv-if vs v-show 


从 上 壕 v-show 图 能 够 明显 看 到， 当 v-if 和 v- 
show 的 条 件 发 生变 化 时 ，v-if 引 起 了 dom 控 作 级 别 
的 变化 ， 而 v-show 仅 发 生 了 样式 的 变化 ， 从 切换 
的 角度 考虑 ，v-show 消 耗 的 性 能 要 比 v-if 小 。 


除 此 之 外 ，v-if 切 换 时 ，Vue.js 会 有 一 个 局 部 
编译 / 色 载 的 过 程 ， 因 为 v-it 中 的 模板 也 可 能 包括 数 
据 绑 定 或 子 组 件 。v-if 会 硝 保 条 件 块 在 切换 当中 适 
当地 消 奴 与 中 间 内 部 的 事件 监听 釉 和 子 组 件 。 而 
且 v-if 是 展 性 的 ， 如 采 在 初始 条 件 为 假 时 ，v-if 本 
了 配 什 么 都 不 会 做 ， 而 v-show 则 仍 会 进行 正常 的 操 
作 ， 然 后 把 css 样 式 设置 为 display:none 。 


所 以 ， 总 的 来 说 ，v-it 有 更 高 的 切换 消耗 而 v- 
show 朋 喝 局 的 初始 洽 染 消耗 ， 我们 需要 根据 实际 
的 使 用 场景 米 远 择 合 适 的 指 仿 。 


2.3.3 ”列表 泻 染 


Vv-for 指 令 主要 用 于 列表 泻 染 ， 将 根据 接收 到 
效 组 重复 演 染 v-for 绑 定 到 的 DOM 元 素 及 内 部 的 子 
元 素 ， 并 且 可 以 通过 设置 别名 的 方式 ， 获 取 数 组 
内 效 据 广 染 到 下 总 中 。 例 如: 


<ul> 
<1i v-for="item In items"> 
<h3>{{item.title}}</h3> 
<p>{{item.description}}</p> 
</1i> 
</ul> 
var vm = new Vue({ 
el : '#app', 
data: { 
items : [ 
{ title : 'title-1', description : 
'description-1'}, 
{ title : 'title-2', description : 
'description-2'}, 
{ title : 'title-3', description : 
'description-3'}, 
{ title : 'title-4', description : 
'description-4'} 


} 
}); 


其 中 items 为 data 中 的 属性 名 ，item 为 别名 ， 可 
以 通过 item 来 获取 当前 数组 这 通 历 的 每 个 元 系 ， 输 出 


<ul> 

<1i> 
<h3>title-1</h3> 
<p>description-1</p> 

</1i><1i> 
<h3>title-2</h3> 
<p>description-2</p> 

</1i><1i> 
<h3>title-3</h3> 
<p>description-3</p> 


</1i><]1i> 
<h3>title-4</h3> 
<p>description-4</p> 
</1i> 
</ul> 


v-for 内 置 了 9$index 变 量 ， 可 以 在 v-for 指 令 内 调 
用 ， 输 出 当前 数组 元 又 的 索引 。 另 外 ， 我 们 也 可 
以 目 己 指定 索引 的 别名 ， 如 <li v-for="(index,item) 
in items">{{index}} — {{$index}} — {{item.title}} 


</li>， 输 出 结果 为 : 


<ul> 
<]11i> 
© -0 - title- 
</1i><1i> 
1 - 1- title- 
</1i><1i> 
2 -2 - title- 


</1i><1i> 
3- 3 - title- 
</1i> 
</U]> 


需要 注意 的 是 Vue.js 对 data 中 数组 的 原生 方法 
进行 了 封 狼 ， 所 以 在 改变 数组 时 能 触发 视图 更 
靳 ， 但 以 下 两 种 情况 是 无 法 触发 视图 更 新 的 : 


@ 通过 索引 直接 修改 数组 元 素 ， 例 如 
vm.items[0] = { title : ‘title-changed'}; 


@ 无 法 直接 修改 “修改 数组 的 长 度 ， 例 如 : 


vm.items.length = 0 


对 于 第 一 种 情况 ，Vue.js 提 供 了 $set 方 法 ， 在 
修改 数据 的 同时 进行 视图 更 新 ， 可 以 写成 : 


vm.items.$set(0, { title : ‘title-changed'} 或 者 
vm.$set('items[0]', { title : title- also-changed '}), 


这 两 种 方式 害 可 以 达到 效果 。 


在 列表 演 染 的 时 候 ， 有 个 性 能 方面 的 小 反 
巧 ， 如 采 数 组 中 有 唯一 标识 id， 例 如 ; 


: 1, title : title-1 
: 2, title : 'title-2'}, 
: 3, title : 'title-3'} 


通过 trace-by 给 数组 设 定 唯一 标识 ， 我 们 将 上 
述 v-for 作 用 于 的 1 元 素 修 改 为 : 


<1li v-for="item in items" track-by="_id"></1i> 


这 样 ，Vue.js 在 演 染 过 程 中 会 尽量 复 用 原 有 对 
象 的 作用 域 及 DOM 元 素 。 


v-for 除 了 可 以 过 历数 组 外 ， 也 可 以 遇 历 对 
象 ， 与 $index 关 似 ， 作 用 域内 可 以 访问 另 一 内 置 变 
量 $9key， 也 可 以 使 用 (key, value) 形式 目 定 义 key 


-二 
变量 。 


2 


<1li v-for="(key, value) in objectDemo"> 
{tkey}} - {{$key}} : {tvalue}} 
</1i> 
var vm = new Vuel({ 
el : '#app', 
data: { 
objectDemo : { 
: 'a-value', 
: 'b-value', 


: 'C-value', 


输出 结果 : 


。 a-a:a-value 
es b-b:b-value 
e。 CcC-C:c-value 


”最 后 ，v-for 还 可 以 接受 单个 整数 ， 用 作 循环 


输出 结果 : 


$ $$ $ @ $ 
人 一 OO 


2.3.4 ”template 标 签 用 法 


上 述 的 例子 中 ，v-show 和 v-if 指 令 都 包含 在 一 
个 根 元 素 中 ， 那 是 否 有 方式 可 以 将 指令 作用 到 多 
个 兄弟 DOM 元 素 上 ? Vue.js 提 供 了 template 标 签 ， 


我 们 可 以 将 指令 作用 到 这 个 标签 上 ， 但 最 后 的 泻 
染 绪 东 里 不 会 有 它 。 例 如 : 


<template v-if="yes"> 
<p>There is first dom</p> 
<p>There is second dom</p> 
<p>There is third dom</p> 


</template> 


输出 结果 为 : 


同样 ，template 标 等 也 文 择 使 用 v-for 指 令 ， 用 
来 痊 染 同 级 的 多 个 兄 第 元 系 。 例 如 : 


<template v-for="item In items"> 
<p>{{item.name}}</p> 
<p>{{item.desc}}<p> 
</template> 


| 
2.4 ”事件 绑 定 与 监听 


当 模 板 洽 染 完成 之 后 ， 束 可 以 进行 事件 的 绑 
定 与 监听 了 。Vue.js 提 供 了 v-on 指 令 用 来 监听 DOM 
事件 ， 通 常 在 模板 内 直接 使 用 ， 而 不 像 传 统 方式 
在 js 中 获取 DOM 元 素 ， 然 后 绑 定 事件 。 例 如 : 


<button v-on:click="say">Say</button> 


2.4.1 “方法 及 内 联 语 句 处 理 需 


通过 v-on 可 以 绑 定 实例 选项 属性 methods 中 的 
方法 作为 事件 的 处 理 侨 ，v-on: 后 参数 授 受 所 有 的 
原生 事件 名 称 。 例 如 : 


<button v-on:click="say">Say</button> 
var vm = new Vuel(t{ 

el : '#app', 

data: { 


msg : 'Hello Vue.js' 
】 
methods : { 


say : function() { 
alert(this.msg); 
} 


} 
}); 


持 击 button， 即 可 触发 say 芳 数 ， 弹 出 alert 
框 'Hello Vue.js' ° 


Vue.]js 也 提供 了 v-on 的 缩写 形式 ， 我 们 可 以 将 
模板 中 的 内 容 改写 为 <button 
@click='say'>Say</button>， 这 两 句 语句 是 等 价 


的 。 


除了 和 直接 绑 定 methods 函 数 外 ，v-on 也 文 持 内 
联 JavaScript 语 句 ， 但 仅 限 一 个 语句 。 例 如 : 


<button v-on:click="sayFrom ('from 
param' )">Say</button> 
var vm = new Vue(t{ 
el : '#app', 
data: { 
msg : 'Hello Vue.js’ 


}, 


methods : { 
sayFrom: function(from) { 
alert(this.msg + '" + from); 
} 
} 
}); 


在 直接 绑 定 methods 函 数 和 内 联 JavaScript 语 人 句 
时 ， 都 有 可 能 需要 获取 原生 DOM 事 件 对 象 ， 以 下 
两 种 方式 都 可 以 获取 : 


<button v-on:click="showEvent">Event</button> 
<button v- 
on:click="showEvent ($event)">showEvent</button> 
<button v- 
on:click="showEvent()">showEvent</button> // 这 样 写 
获取 不 到 event 
var vm = new Vue(L 
el : '#app', 
methods : { 
showEvent : function(event) { 
console.1log(event); 


} 
} 
}); 


| 


同一 元 素 上 也 可 以 通过 v-on 绑 定 多 个 相同 事 
件 范 数 ， 执 行 顺序 为 顺序 执行 ， 例 如 : 


<div v-on:click="sayFrom('first')" v-on:click 
="SayFrom( 'Second ) "> 


2.4.2 ”修饰 符 

Vue.js 为 指令 v-on 提 供 了 多 个 修饰 他 ， 方 便 我 
们 处 理 一 些 DOM 事 件 的 细节 ， 并 且 修 师 符 可 以 是 
联 使 用 。 主 要 的 修饰 从 如 下 。 

.stop: 等 同 于 调用 event. stopPropagation()。 

.prevent: 等 同 于 调用 event.preventDefault() 。 


.capture: 使 用 capture 模 陈 添 加 事件 监听 套 。 


.self: 只 当 事 件 站 从 监听 元 系 本 号 和 触 发 时 才 触 
发 回调 。 


便 用 态 坟 则 下 


<a v-on:click.stop='doThis'></a> 

<form v-on:submit.prevent="onSubmit"></form> // 阻 
止 表单 默认 提交 事件 

<form v-on:submit.stop.prevent="onSubmit"></form> 

// 阻止 默认 提交 事件 且 阻 止 冒 泡 

<form v-on:submit.stop.prevent></form> // 也 可 以 只 有 


修饰 符 ， 并 不 绑 定 事件 


可 以 竹 试 运行 以 下 这 个 例子 ， 更 好 地 理解 修 
吓 符 在 其 中 起 到 的 作用 。 


var vm = new Vue({ 
el : '#app', 
methods : { 
saySelf(msg) 1{ 
alert(msg); 
} 


} 
}); 
<div v-on:click="saySelf('click from inner')" v- 
on:click.self="saySelf('click from self')"> 
<button v-on:click="saySelf('button 
click')">button</button> 
<button v-on:click.stop="saySelf('just button 
click')">button</button> 
</div> 


除了 事件 修饰 符 之 外 ，v-on 还 提供 了 按键 修 
吓人 符 ， 方 便 我 们 监听 键盘 事件 中 的 按键 。 例 如 : 


<input v-on:keyup.13="submit"/> // 监听 input 的 输入 ， 
当 输 入 回 车 时 触发 Submit 函 数 〈 回 车 的 keycode 值 为 13) ， 用 于 处 
理 常 见 的 用 户 输 入 完 直接 按 回 车 键 提交 ) 


Vue.js 给 一 些 第 用 的 按键 名 提供 了 别称 ， 这 样 
就 省 去 了 一 些 记 keyCode 的 事件 。 全 部 按键 别名 
为 : enter、tab、delete、esc、space、up、down、 
left 、right。 例 如 : 


<input v-on:keyup.enter="submit" /> 


Vue.js 也 人 允许 我 们 目 己 定义 按键 别名 ， 例 如 : 


VvVue.,directive('on'),.keycodes,f1 = 112; // 即 可 以 使 用 


<input v-on:keyup.f1i="help" /> 


Vue.js 2.0 中 可 以 直接 在 Vue.config.keyCodes 
目 定义 按键 别名 ， 无 需 修 改 v-on 指 令 ， 例 
站: 


Vue.config.keyCodes.fl = 12。 


2.4.3 “与 传统 事件 绑 定 的 区 别 


如 采 你 之 前 没有 接触 过 Angularjs，ReactJS 这 
类 框架 ， 或 许 会 对 Vue.js 这 种 事件 监听 方式 感到 
惑 。 上 毕竟 我 们 一 开始 搂 受 的 理念 殉 是 将 HTML 和 JS 
隔离 开 编 写 。 但 其 实 Vue.js 事 件 处 理 方 法 和 表达 式 
都 严格 绑 定 在 当前 视图 的 ViewModel 上 ， 所 以 并 不 
会 导致 维护 困难 。 


而 这 么 写 的 好 处 在 于 : 


@ 无 需 手 动 管理 事件 。ViewModal 被 销毁 
时 ， 所 有 的 事件 处 理 硕 都 会 目 动 航 删 除 ， 让 我 们 
从 获取 DOM 绑 定 事件 然后 在 特定 情况 下 再 解 绑 这 
样 的 事情 中 解脱 出 来 。 


@ 解 籼 。ViewModel 代 人 码 是 纯粹 的 逻辑 代 
人 和 DOM 无 和 天 ， 有 利于 我 们 写 目 动 化 测试 用 
人 多。 


还 有 个 与 以 往 不 同 的 细 市 是 ， 我 们 在 处 理 ul、 
1 这 种 列表 ， 无 其 是 下 拉 刷 新 这 种 需要 异步 加 载 数 
据 的 列表 时 ， 往 往 会 把 li 事件 代理 到 ul 上 ， 这 样 异 
步 加 载 进 来 的 新 数据 殉 不 需要 再 次 绑 定 事件 。 而 
Vue.js 这 类 的 框 染 由 于 不 需要 手动 添加 事件 ， 往 往 
直接 会 把 事件 绑 定 在 ii 上， 类 似 这 样 :<li v- 
repeat="item in items" v-on:click="clickLi"></li>, 
理论 上 每 次 新 增 i 的 时 候 都 会 进行 同 li 个 数 的 事件 
绑 定 ， 比 用 事件 代理 多 耗 了 些 性 能 。 但 在 实际 运 
用 中 并 没有 什么 特别 的 性 能 瓶颈 影响 ， 而 且 我 们 ] 
也 省 去 在 代理 中 处 理 e.target 上 步骤 ， 让 事件 和 
DOM 元 系 关 系 更 茶 密 、 人 简单 。 


2.5 Vue.extend() 


组 件 化 开发 也 是 Vue.js 中 非常 重要 的 一 个 特 
性 ， 我 们 可 以 将 一 个 页 面 看 成 一 个 大 的 根 组 件 ， 


里 面包 含 的 元 素 束 古 不 同 的 子 组 件 ， 了 于 组 件 也 可 
以 在 不 同 的 根 组 件 里 说 调用 。 在 上 壕 例 子 中 ， 可 
以 看 到 在 一 个 页 面 中 通 弟 会 声明 一 个 Vue 的 实例 
new Vue({j) 作 为 很 组件， 那么 如 何 生成 可 被 重复 
使 用 的 子 组 件 呢 ? Vue.js 提 供 了 Vue.extend(options) 
方法 ， 创 建 基 础 Vue 构 造 磊 的“ 子 类 ”， 参 数 options 
对 象 和 有 直接 声明 Vue 实 例 参 数 对 象 基 本 一 致 ， 使 用 
方法 如 下 : 


var Child = Vue.extend({ 

template : '#child', 

// 不 同 的 是 ，el 和 data 选 项 需要 通过 函数 返回 值 赋值 ， 避 人 免 多 
个 组 件 实例 共用 一 个 数据 

data : function() { 


人 
Vue.component('child'，Child) // 全 局 注册 子 组 件 
<child ...></child> // 子 组 件 在 其 他 组 件 内 的 调用 方式 


更 多 组 件 的 使 用 方法 将 会 在 第 6 章 中 进行 详细 
的 说 明 。 


第 3 章 ”指令 


指令 是 Vue.js 中 一 个 重要 的 特性 ， 主 要 提供 了 
一 种 机 制 将 数据 的 变化 映 喘 为 DOM 行 为 。 那 什么 
叫 数据 的 变化 映射 为 DOM 行 为 ? 前 文中 阐述 过 
Vue.js 十 通过 数据 驱动 的 ， 所 以 我 们 不 会 直接 去 修 
改 DOM 结 构 ， 不 会 出 现 类 似 于 
$('ul").append('<li>one</li>") 这 样 的 控 作 。 当 数据 变 
化 时 ， 指 令 会 依据 设 定好 的 操作 对 DOM 进 行 修 
改 ， 这 样 束 可 以 只 关注 数据 的 变化 ， 而 不 用 去 管 
理 DOM 的 变化 和 状态 ， 使 得 逻辑 更 加 清晰 ， 可 维 
护 性 更 好 。 


Vue.js 本 和 号 束 提 供 了 大 量 的 内 置 指 令 来 进行 对 
DOM 的 操作 ， 我 们 也 可 以 开发 目 定 义 指令 。 本 章 
主要 介绍 部 分 常见 指令 的 使 用 及 场景 以 及 目 定 义 

站 令 的 开发 和 指令 相 天 的 参数 。 
3.1 内 置 指 令 
本 契 主 要 介绍 Vue.js 的 内 置 指令 。 


3.1.1 v-bind 


v-bind 主 要 用 于 动态 绑 定 DOM 元 到 属性 
(attribute) ， 即 元 素 属 性 实际 的 值 是 由 vm 实例 中 
的 data 属 性 提供 的 。 例 如 : 


<img v-bind:src='avatar' /> 


avatar : http://....'" 


vV-bind 可 以 简写 为 : ， 上 述 例 子 即 可 催 写 为 


<img :src='avatar' />。 


v-bind 还 拥有 三 种 修 号 伯 ， 分 别 
为 .sync、.once、.camel， 作 用 分 别 如 下 。 


.sync: 用 于 组 件 props 必 性， 进行 双 回 绑 定 ， 
即 父 组 件 绑 定 传递 给 子 组件 的 值 ， 无 论 在 哪个 组 
件 中 对 其 进行 了 修改 ， 其 他 组 件 中 的 这 个 值 也 会 
随 之 更 新 。 例 如 : <my-child :parent.sync='parent'> 
</my-child>。 父 组 件 实 例 vm.parent 将 通过 prop 选 
项 传递 给 子 组 件 my-child， 即 my-child 组 件 构造 函 
数 需要 定义 选项 props:[parent]， 便 可 通过 子 组 件 


目 身 实例 vm.parent 获 取 父 组 件 传递 的 数据 。 两 个 
组 件 都 共 圣 这 一 份 数 据 ， 不 论 谁 修改 了 这 份 数 
据 ， 组 件 获取 的 数据 都 是 一 致 的 。 但 一 般 不 推荐 
了 于 组 件 和 直接 修改 父 组 件数 据 ， 这 样 会 导致 耦合 且 
组 件 内 的 数据 不 容易 维护 。 


.once: 同 .synce 一 样 ， 用 于 组 件 props 属 性 ， 
但 进行 的 是 单 次 绑 定 。 和 双 回 绑 定 正好 相反 ， 单 
次 绑 定 是 将 绑 定 数据 传递 给 也 组 件 后 ， 子 组 件 单 
独 维护 这 份 数据 ， 和 父 组 件 的 数据 再 无 关系 ， 父 
组 件 的 数据 发 生变 化 也 不 会 影 啊 于 组件 中 的 数 
据 。 例 如 : <my-child :parent.once='parent'></my- 
child> 


.camel: 将 绑 定 的 特性 名 字 转 回 狠 峰 命 名 。 只 
能 用 于 普通 HITML 属 性 的 绑 定 ， 通 币 会 用 于 svg 标 
签 下 的 属性 ， 例 如 : <svg width='400'height='300， 
:View-box.camel='"viewBox'></svg>， 输 出 结果 即 为 
<svg width="400" height="300" viewBox="....."> 
</svg> 


不 过 在 Vue.js 2.0 中 ， 修 饰 从 .syce 和 .once 均 补 
废弃 ， 规 定 组 件 间 仅 能 单 回 传 递 ， 如 果子 组 件 需 
要 修改 父 组 件 ， 则 必须 使 用 事件 机 制 来 进行 处 


3.1.2 v-model 


v-model 指 令 在 第 2.2.3 小 节 中 的 表单 控件 中 已 
经 说 明 过 了 ， 这 里 吏 不 再 发 述 了 。 该 指令 主要 用 
于 input、select、textarea 标 签 中 ， 上 有 具有 1lazy、 
number、debounce (2.0 废 除 ) 、trim (2.0 新 增 ) 
这 些 修 师 符 。 


3.1.3 v-if/v-else/v-show 


v-if/v-else/v-show 这 三 个 指令 主要 用 于 根据 条 
件 展示 对 应 的 模板 内 容 ， 这 在 第 2.3.2 小 太 的 演 染 
语法 中 也 进行 了 说 明 。v-if 和 v-show 的 主要 区 别 束 
在 于 ，v-if 在 条 件 为 false 的 情况 下 并 不 进行 模板 的 
编译 ， 而 v-show 则 会 在 模板 编译 好 之 后 将 元 系 隐 
省 挥 。v-if 的 切换 消耗 要 比 v-show 高 ， 但 初始 条 件 
为 false 的 情况 下 ，v-if 的 初始 演 染 要 稍 快 。 


3.1.4 v-for 


v-for 也 是 用 于 模板 泻 染 的 指令 ， 在 第 2.3.3 小 
节 列 表 泻 染 中 我 们 也 已 说 明 过 ， 这 里 就 不 再 歼 
述 。 常 见 用 法 如 下 : 


<ul> 
<1i v-for="'(index, item) In Items '> 


<p>{{ item.name }}</p> 


</1i> 
</U]> 


v-for 指 令 用 法 在 Vue.js 2.0 中 做 了 些 细微 的 调 
整 ， 大 致 包含 以 下 几 个 方面 : 


1. 参数 顺序 变化 


当 包 舍 参 数 index 或 Key 时， 对 和 象 参 数 修改 为 
(item, index) 或 (value, key) ， 这 样 与 JS Array 
对 象 的 新 方法 forEach 和 map， 以 及 一 些 对 象 友 代 
属 〈 例 如 lodash) 的 参数 能 保持 一 致 。 


2. v-bind:key 
属性 track-by 补 v-bind: key 人 代替 ，<div v- 
for="item in items" tranck-by="id"> 需 要 改写 成 <div 


v-for="item in items" v-bind:key="item.id"> ° 


3. nin10 


v-for="n in 10" 中 的 n 由 原来 的 0 一 9 送 代 变 成 1 
一 10 达 代 。 


3.1.5 v-on 


V-on 指 令 主 要 用 于 事件 绑 定 ， 在 第 2.47 中 我 
们 已 经 说 明 。 回 顾 一 下 用 法 : 


<button v-on:click='onClick'></button> 


v-on 可 以 简写 为 : 


<button @click='onClick'></button> 


修饰 全 包括 .stop、.prevent、.capture、.self 以 
及 指定 按键 .{keyCodelkeyAlias} 。 


在 Vue.js 2.0 中 ， 在 组 件 上 使 用 v-on 指 令 只 监 
听 自 定义 事件 ， 即 使 用 $emit 触 发 的 事件 ， 如 果 要 
监听 原生 事件 ， 需 要 使 用 修饰 符 .native， 例 如 
<my-component v-on:click.native="onClick"></my- 
component> ° 


3.1.6 v-text 


V-text， 参 数 类 型 为 String， 作 用 是 更 新 元 素 的 
textContent。{{}} 文 本 插 信 本 号 也 会 被 编译 成 
textNode 的 一 个 v-text 指 令 。 而 与 直接 使 用 {{} 不 
同 的 是 ，v-text 需 要 绑 定 在 某 个 元 系 上 ， 能 避免 未 
编译 前 的 内 现 问 题 。 例 如 : 


<Span v-text="msg"></span> 


如 采 直 接 使 用 <span>{{msg}}</span>， 在 生命 
周期 beforeCompile 期 间 ， 此 刻 msg 数 据 尚 未 编译 至 
{{msg}} 中 ， 用 户 能 看 到 一 瞬间 的 {{msg}}， 然 后 
内 现 为 There is a message， 而 用 v-text 的 话 则 不 会 
有 这 个 问题 ， 如 图 3-1 所 示 。 


[ 晴 所 加 | Elements Console Sources Netw eline >» 
Paused in debugger AR xD aa 
{{msg}} so» : | 3.1html x 
i <script type="text/javascript"> 
口 top var vm = new Vuel(l{ 
v OO filey/ el : '#app’, 
data: { 
Users/ ( msg :; ! 
}, 
beforeCompil 
debugger; 
3 
</script> 
</body> 
tml> 
图 3-1 


3.1.7 Vv-HIML 


v-HTML, 参数 类 型 为 String， 作用 为 更 新 元 
素 的 innerHTML ， 接 受 的 字符 串 不 会 进行 编译 等 
操作 ， 按 普通 HTML 处 理 。 同 v-text 类 似 ，{{ 全 信 
插值 也 会 编译 为 节点 的 vHTML 指 令 ，v-HTML 也 
需要 绑 定 在 某 个 元 素 上 旦 能 避免 编译 前 闪现 问 
题 。 例 如 : 


<div>{{{HTML}}}</div> 
<div v-HTML="HTML"></div> 


3.1.8 v-el 


v-el 指 令 为 DOM 元 素 注 册 了 一 个 索引 ， 使 得 
我 们 可 以 直接 访问 DOM 元 素 。 语 法 上 说 ， 可 以 通 
过 所 属实 例 的 $els 属 性 调用 。 例 如 : 


<div v-el:demo>there is a el demo</div> 
vm.$els.demo.innerText // -> there is a el demo 


或 者 在 vm 内 部 通过 this 进 行 调用 。 


另外 ， 由 于 HMTL 不 区 分 大 小 写 ， 在 v-el 中 如 
果 使 用 了 驳 峰 式 命 名 ， 系 统 会 目 动 转 成 小 写 。 但 
可 以 使 用 “-?” 来 连接 你 期 望 大 写 的 字母 。 例 如 : 


<div v-el:camelCase>There is a camelcase</div> 
<div v-el:camel-case>There is a camelCase</div> 
vm.$els.camelcase.innerText // -> There is a 
camelcase 

vm.$els.camelCase.innerText // -> There is a 


camelCase 


3.1.9 v-ref 


Vv-ref 指 令 与 Vv-el 类 似 ， 只 不 过 v-ref 作 用 于 子 组 
件 上 ， 实 例 可 以 通过 $refs 访 问 子 组 件 。 命 名 方式 
oe 想 使 用 弦 峰 式 命 名 的 话 用 “-” 来 做 连接 。 
列 如 : 


<message v-ref:title content="title"></message> 
<message v-ref:sub-title content="subTitle"> 
</message> 
var Message = Vue.extend({ 

props : ['content'], 

template : '<h1i>{{content}}</hi1i>'" 


}); 


Vue.component('message', Message); 


我 们 最 终 将 vm.$refs.title 和 vm.$refs.subTitle 用 
console.log 的 方式 打印 到 控制 台中 ， 结 采 为 : 


> VueComponent {$el: hl, S$parent: Vue, $root: Vue, $children: Array[8}], S$refs: Object..} 


= VueComponent {$el: hl, $parent: Vue, $root: Vue, $children: Array{[8}], S$refs: Object..} 


输出 了 两 个 子 组 件 的 实例 。 


从 理论 上 来 说 ， 我 们 可 以 通过 父 组 件 对 于 组 
件 进 行 任意 的 操作 ， 但 实际 上 尽量 还 是 会 采用 
props 效 据 绑 定 ， 用 组 件 间 通信 的 方式 去 进行 逻 覃 
上 的 交互 ， 尽 量 让 组 件 只 操作 目 己 内 部 的 数据 和 
状态 ， 如 琳 组 件 间 有 通信 ， 也 通过 调用 组 件 骏 露 
0 


3.1.10  v-pre 
V-pre 指 令 相 对 人 简单， 了 驶 是 跳 过 编译 这 个 元 素 


和 子 元 系 ， 显 示 原 始 的 {{}Mustache 标 人 签 ， 用 来 
减少 编译 时 间 。 例 如 : 


<div v-pre>{{ uncompiled}}</div> 
var vm = new Vue(t{ 


uncompiled : 'Thers is an uncompiled element' 


最 后 输出 : 


3.1.11 v-cloak 


v-cloak 指 令 相 当 于 在 元 系 上 添加 了 一 个 [v- 
cloak] 的 属性 ， 直 到 关联 的 实例 结束 编译 。 官 方 推 
存 可 以 和 css 规 则 [v-cloak]{ display :none } 一 起 使 
用 ， 可 以 隐 羧 未 编译 的 Mustache 标 仁 二 到 实例 准 
备 完毕 。 例 如 : 


<div v-cloak>{{ msg }}</div> 


3.1.12 Vv-once 


Vv-once 指 令 是 Vue.js 2.0 中 新 增 的 内 置 指 令 ， 用 
于 标明 元 素 或 组 件 只 演 染 一 次 ， 即 使 随后 发 生 绑 
定数 据 的 变化 或 更 新 ， 该 元 素 或 组 件 及 包含 的 于 
元 系 者 不 会 再 次 航 编译 和 得 染 。 这 样 陨 相当 于 我 
们 明确 标注 了 这 些 元 素 不 需要 被 更 狐 ， 所 以 V-once 
的 作用 是 最 大 程度 地 提升 了 更 新 行为 中 页 面 的 性 


能 ， 可 以 略 过 一 些 明确 不 需要 变化 的 步 台 。 使 用 
J a 


<span v-once>{{msg}}</span> 
<my-component v-once :msg='msg'></my-component> 


3.2 目 定 义 指令 基础 


除了 内 置 指令 外 ，Vue.js 也 提供 了 方法 让 我 们 
可 以 注册 目 定 义 指令 ， 以 便 封 痛 对 DOM 元 素 的 重 
的 处 理 行为 ， 提 高 代码 复 用 率 。 本 小 世 主 要 说 明 
了 如 何 创建 、 注 册 目 定义 指令 ， 以 及 讲述 指令 的 
相关 属性 钧 于 了 范 数 ， 更 深 一 步 地 了 解 指 仿 在 Vue.js 
中 起 到 的 作用 。 


3.2.1 指令 的 注册 


我 们 可 以 通过 Vue.directive(id, definition) 方法 
注册 一 个 全 局 日 定义 指令 ， 接 收 参数 id 和 定义 对 
象 。id 是 指令 的 唯一 标识 ， 定 义 对 象 则 是 指令 的 相 
天 属性 及 钧 子 鸟 数 。 例 如 : 


Vue.directive(‘global-directive’, definition); // 我 
们 暂时 只 注册 了 这 个 指令 ， 并 没有 赋予 这 个 指令 
任何 功能 。 


我 们 可 以 在 模板 中 这 么 使 用 : 


<div v-global-directive></div> 


而 除了 全 局 注册 指令 外 ， 我 们 也 可 以 通过 在 
组 件 的 directives 选 项 注册 一 个 局 部 的 目 定义 指 
令 。 例 如 : 


var comp = Vue.extend({ 
directives : { 
'JocalDirective' : {} // 可 以 采用 驼峰 式 命名 


} 
}); 


该 指令 束 只 能 在 当前 组 件 内 通过 v-local- 
directive 的 方式 调用 ， 而 无 法 个 其 他 组 件 调 用 。 


3.2.2 ”指令 的 定义 对 象 


我 们 在 注册 指令 的 同时 ， 可 以 传 入 definition 
定义 对 象 ， 对 指令 赋予 一 些 特殊 的 功能 。 这 个 定 
义 对 和 象 主要 包含 三 个 钓 子 芳 数 : bind 、update 和 


unbind ° 


bind: 只 被 调用 一 次 ， 在 指令 第 一 次 绑 定 到 元 
素 上 时 调用 。 


update: 指令 在 bind 之 后 以 初始 值 为 参数 进行 
一 次 调用 ， 之 后 每 次 当 绑 定 值 发 生变 化 时 调 
用 ，update 接 收 到 的 参数 为 newValue 和 oldValue 


unbind: 指令 从 元 系 上 解 绑 时 调用 ， 只 调用 一 
次 。 


这 二 个 函数 部 十 可 迁 萃 数 ， 但 注册 一 个 空 指 
肯 害 没有 意义 ， 来 看 下 面 这 个 例子 ， 会 使 我 们 
对 整个 指令 周期 有 更 明确 的 认识 。 


el 


<div v-if="isExist" v-my-directive="param"></div> 
Vue.directive('my-directive', { 
bind : function() { 


console.1log('bind', arguments ) ; 


}, 
Update : function(newValue, oldValue) { 
console.log('update', newValue, oldValue) 


}, 


unbind : function() { 
console.1log('unbind', arguments ) ; 


el : '#app', 


param : "first'"', 
isExist : true 


} 
}); 


我 们 在 控制 台 里 先后 输入 vm.param 
='second' 和 vm.isExist = false， 整 体 输 出 如 下 : 


另外 ， 如 果 我 们 只 需要 使 用 update 芳 数 时 ， 可 
以 直接 传 入 一 个 函数 代替 定义 对 象 : 


Vue.directive('my-directive', function(value) { 
// 该 妙 数 即 为 update 函 数 
});， 


上 述 例 和 于 中 ， 可 以 使 用 my-directive 指 令 绑 定 
的 值 是 data 中 的 param 必 性。 也 可 以 直接 绑 定 字符 
串 常 量 ， 或 使 用 字面 修饰 全， 但 这 样 的 话 需 要 注 
意 update 方 法 将 只 调用 一 次 ， 因 为 普通 字符 串 不 能 
呵 应 数据 变化 。 例 如 : 


<div v-my-directive="constant string"/></div> // 
-> value 为 undefined， 因 为 data 中 没有 对 应 的 属性 

<div v-my-direcitve="'constant string'"></div> // 
-> Value 为 constant string， 绑 定 字 符 串 需要 加 单 引 号 
<div v-my-directive.literal="constant string"> 
</div> // -> value 为 constant string， 利 用 字面 修饰 符 


后 无 需 使 用 单 引号 


除了 字符 串 外 ， 指 令 也 能 接受 对 象 字面 量 或 
任意 合法 的 JavaScript 表 达 式 。 例 如 : 


<div v-my-directive="{ title : 'Vue.js', author : 
'You'}" ></div> 

<div v-my-directive="isExist ? 'yes' : 'Nno'" > 
</div> 


注意 此 时 对 象 字 面 量 不 需要 用 单 引 号 括 起 
来 ， 这 和 字符 绅 帝 量 不 一 样 。 
3.2.3 ”指令 实例 属性 

除了 了 解 指 令 的 生命 周期 外 ， 还 需要 知道 指 
令 中 能 调用 的 相关 属性 ， 以 便 我 们 对 相关 DOM 进 
行 操 作 。 在 指令 的 钧 子 函 数 内 ， 可 以 通过 this 来 调 
用 指令 实例 。 下 面 就 详细 说 明 指令 的 实例 属性 。 


el: 指令 绑 定 的 元 系 。 


vm: 该 指令 了 上 上 下 文 ViewModel， 可 以 为 new 
Vue0 的 实例 ， 也 可 以 为 组 件 实 例 。 


expression: 指令 的 表达 式 ， 不 包括 参数 和 过 


arg: 指令 的 参数 。 
name: 指令 的 和 名字， 不 包括 v- 表 组 。 
modifiers: 一 个 对 象 ， 包 侣 指 令 的 修 师 人 符 。 


descriptor: 一 个 对 象 ， 包 含 指 令 的 解析 结 
果 o 


我 们 可 以 通过 以 下 这 个 例子 ， 更 直观 地 了 解 
到 这 些 属性 : 


<div v-my-msg:console.1og="content"></div> 
Vue.directive('my-msg', { 
bind : function() { 
console.10g('~~~~~~~~~~~ bind~~~~~~~~~~~~~ 3 
console.log('el', this.el); 
console.1log('name', this.name); 
console.1log('vm', this.vnm); 
console.log('expression', this.expression); 
console.log('arg', this.arg); 
console.log('modifiers', this.modifiers ); 
console.log('descriptor', this.descriptor); 


update : function(newValue, oldValue) { 
var keys = Object.keys(this.modifiers); 
window[this.arg][keys[0]](newValue); 

}, 


unbind : function() { 


) 
}); 
var vm = new Vuel(t{ 
el : '#app', 
data : { 
content : 'there is the content' 
} 


}); 


输出 结果 如 下 : 


—~—~~~bind~~~~ 1. ht 

el div></div 3.1.html:40 
name my-msg 3.1.html:41 
Vm -Pe lL:42 
» Vue {$el: div#app, S$parent: : S$root: Vue, $chiildren: Array[8}, 

srefs: Object.} 
expression content 3.1.html:43 
arg console 3.1.html:44 
modifiers Object {log: true} 3.1.html:45 
descriptor 3.1.html:46 
四 Object {name: "my-msg", attr: "v-my-msg:CconNnsole.log", raw: "content", def: 

Object, arg: "console".} 
there is the content 3.1.html:56 


3.2.4 元素 指令 


元 素 指令 是 Vue.js 的 一 种 特殊 指令 ， 兰 通 指令 
需要 绑 定 在 某 个 具体 的 DOM 元 素 上 ， 但 元 素 指 令 
可 以 单独 存在 ， 从 使 用 方式 上 看 更 像 古 一 个 组 
件 ， 但 本 映 内 部 的 实例 属性 和 钓 子 芳 数 是 和 指令 
PH eA 


<div v-my-directive></div> // -> 普通 指令 使 用 方式 
<my-directive></my-directive> // -> 元 素 指 令 使 用 方式 


元 系 指 令 的 注册 方式 和 普通 指令 类 似 ， 也 有 
全 局 注册 和 局 部 注册 两 种 。 


Vue.elementDirective('my-ele-directive') // 全 局 注 
肌 方 起 
var Comp = Vue.extend({ // 局 部 注册 ， 仅 限 该 组 件 内 使 用 
.…，// 省 略 了 其 他 参数 
elementDirectives : { 
'eleDirective' : f{} 


} 


}); 


Vue.component('comp', Comp); 


元 素 指 令 不 能 接受 参数 或 表达 式 ， 但 可 以 谈 
取 元 系 特 性 从 而 决定 行为 。 而 且 当 编 详 过 程 中 巡 
到 一 个 元 隶 指 令 时 ，Vue.js 将 忽略 该 元 素 及 其 于 元 
元 素 指 令 本 吴 才 可 以 操作 该 元 系 及 其 于 
元 系 


Vue.js 2.0 中 取消 了 这 个 特性 ， 推 荐 使 用 组 件 
来 实现 需要 的 业务 。 
3.3 ”指令 的 高 级 选项 

Vue.js 指令 定义 对 象 中 除了 钩子 函数 外 ， 还 有 
一 些 其 他 的 选项 ， 我 们 将 在 本 万 中 对 其 做 逐个 的 
讲述 。 
3.3.1 params 


定义 对 象 中 可 以 接受 一 个 params 数 组 ，Vue.js 
编译 硕 将 目 动 提取 目 定 义 指 令 绑 定 元 素 上 的 这 些 
属性 。 例 如 : 


<div v-my-advance-directive a="paramA"></div> 
Vue.directive('my-advance-directive', { 
params : ['a'], 
bind : function() { 
console.log('params', this.params); 


}); 


除了 直接 传 入 数值 外 ，params 支 持 绑 定 动 态 
数据 ， 并 且 可 以 设 定 一 个 watcher 监 听 ， 当 数据 变 
化 时 ， 会 调用 这 个 回调 范 效 。 例 如; 


<div v-my-advance-directive v-bind:a="a"></div> 
// 当然 也 可 以 简写 成 <div v-my-advance-directive 
:a="a"></div> 
Vue.directive('my-advance-directive', { 
params : ['a'], 
paramwatchers : { 
a : function(val, oldVal) { 


console.log('watcher: ', val, oldVal) 


} 
}, 
bind : function() { 


console.log('params', this.params); 


} 
}); 
var vm = new Vuel(t{ 
el : '#app', 
data : { 
a : 'dynamitc data' 


} 
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3.3.2 deep 


当 目 定义 指令 作用 于 一 个 对 象 上 时 ， 我 们 可 
deep 选 项 来 监听 对 象 内 部 发 生 的 变化 。 例 
中 


<div v-my-deep-directive="0bj"></div> 
<div v-my-nodeep-directive="obj"></div> 
Vue.directive('my-deep-directive', { 
deep : true, 
update : function(newValue, oldValue) { 
console.log('deep', newValue.a.b); 
} 
了 ) 
Vue.directive('my-nodeep-directive', { 
update : function(newValue, oldValue) { 
console.log('deep', newValue.a.b); 
} 
了 ) 


var vm = new Vue(L 
el : '#app', 


a :it{ 
b : 'inner 
} 
} 


运行 后 ， 在 控制 台中 输入 vm.obj.a.b = 'inner 
changed', > 只 有 my-deep-directive 调 用 了 update 苏 
数 ， 输 出 了 改变 后 的 值 。 


Vue.js 2.0 中 废弃 了 该 选项 
3.3.3 twoWay 
在 目 定义 指令 中 ， 如 采 需 要 问 Vue 实 例 写 回 数 


据 ， 束 需要 在 定义 对 象 中 使 用 woWway:true， 这 样 
可 以 在 指令 中 使 用 this.set(value) 来 写 回 数据 。 


<input type="text" v-my-twoway-directive="param" / 
> 
Vue.directive( 'my-twoway-directive', { 
twowWay : true, 
bind : function() { 
this.handler = function () { 
console.1log('value changed: ',， 
this.el.value); 
this.set(this.el.value) 
}.bind(this) 
this.el.addEventListener('input', this.handler) 
}, 
unbind: function () { 
this.el,removeEventListener( ' input '， 
this.handler) 


} 
}); 
var vm = new Vuel({ 

el : '#app', 

data : { 

param : 'first', 


} 
}); 


此 时 在 input 中 输入 文字 ， 然 后 在 控制 台中 输 
入 vm.param 印 可 观察 到 实例 的 param 属 性 已 被 改 


需要 注意 的 是 ， 如 采 没 有 设 定 twvoWay:true， 
不在 目 定 义 指令 中 调用 this.set(), Vue.js 会 抛 出 异 
ia 

是 O 


Or [Vue warn]j: Directive.set() can only be used inside 
twoWaydirectives. 


3.3.4 acceptStatement 


选项 acceptStatement:true 可 以 允许 目 定义 指令 
接受 内 联 语 句 ， 同 时 update 函 数 接 收 的 全 是 一 个 函 
数 ， 在 调用 该 妙 数 时 ， 它 将 在 所 属实 例 作 用 域内 


运行 。 


<div v-my-directive="i++"></div> 
Vue.directive('my-directive', { 
acceptStatement: true, 
update: function (fn) { 
} 
}) 


var vm = new Vue({ 
el : '#app', 


如 琳 在 update 芳 数 中 ， 运 行 fn()， 则 会 执行 
联 语句 i++， 此 时 vm.i= 1。 但 更 改 vm.i 并 不 会 触发 
Update 函数 。 


需要 当心 的 是 ， 如 有 果 此 时 没有 设 定 
acceptStatement: true， 该 指令 会 陷入 一 个 死 循环 
中 。v-my-statement-directive 接 受到 i 的 值 每 次 都 在 
变化 ， 会 重复 调用 update 玉 数 ， 最 终 导 鱼 Vue.js 抛 
出 异 单 。 


3.3.5 terminal 


和 远 项 terminal 的 作用 是 阻止 Vue.js 允 有 历 这 个 元 
素 及 其 内 部 元 素 ， 并 由 该 指令 本 吴 去 编译 绑 定 元 
素 及 其 内 部 元 素 。 内 置 的 指令 v-f 和 v-for 都 是 


terminal 指 令 。 


使 用 terminal 先 项 是 一 个 相对 较为 复 洒 的 过 
程 ， 你 需要 对 Vue.js 的 编译 过 程 有 一 定 的 了 解 ， 这 


里 借助 官网 的 一 个 例子 来 大 致 说 明 如 何 使 用 


terminal 。 


<div id="modal"></div> 


<div v-inject:modal> 
<h1i>header</h1> 
<p>body</p> 
<p>footer</p> 
</div> 
var FragmentFactory = Vue.FragmentFactory // 
Vue .js 全 局 API， 用 来 创造 fragment 的 工厂 函数 ，fragment 中 包 
含 了 具体 的 Scope 和 DOM 元 素 ， 可 以 看 成 一 个 独立 的 组 件 或 者 实例 。 
var remove = Vue.util.remove // Vue.js 工 具 类 画 数 ,， 移 
除 DOM 元 素 
var createAnchor = Vue.util.createAnchor // 创建 销 
点 ， 锚 点 在 debug 模 式 下 是 注释 万 点 ， 非 debug 模 式 下 是 文本 帮 点 ， 
主要 作用 是 标记 dom 元 素 的 插入 和 移 除 
Vue.directive('inject', { 
terminal: true, 
bind: function () { 
var container = 
document .getElementById(this.arg) // 获取 需要 注入 到 的 
DOM 元 素 
this.anchor = createAnchor('v-inject') // 创建 
v-inject 锚 点 
container.appendchild(this.anchor) // 销 点 挂 载 到 
注入 节 扣 中 
remove(this.el) // 移 除 指令 绑 定 的 元 素 
var factory = new FragmentFactory(this,VvVm， 
this.el) // 创建 fragment 
this.frag = factory,create(this,_ host， 
this._scope, this,._frag) 
// this._host 用 于 表示 存在 内 容 分 发 时 的 父 组 件 
// this._scope 用 于 表示 存在 v-for 时 的 作用 域 


// this,， frag 用 于 表示 该 指令 的 父 fragment 
this.frag.before(this.anchor) 

}, 

unbind: function () { 
this.frag.removel() 
remove(this.anchor) 


} 
}) 


最 终 我 们 得 到 的 结果 是 : 


v=<div id="modal"> = $8 


3.3.6 priority 


远 项 priority 即 为 指定 指令 的 优先 级 。 普 通 指 
令 默 认 是 1000，termial 指 令 默认 为 2000。 同 一 元 
素 上 优先 级 高 的 指令 会 比 其 他 指令 处 理 得 早 一 
些 ， 相 同 优先 级 则 按 出 现 顺 序 依 次 处 理 。 以 下 为 
内 置 指令 优先 级 顺序 : 


export const ON = 700 


export const MODEL = 800 
export const BIND = 850 

export const TRANSITION = 1100 
export const EL = 1500 

export const COMPONENT = 1500 
export const PARTIAL = 1750 
export const IF = 2100 

export const FOR = 2200 

export const SLOT = 2300 


3.4 ”指令 在 Vue.js 2.0 中 的 变化 


由 于 指令 在 Vue.js2.0 中 发 生 了 比较 大 的 变化 ， 
所 以 本 市 单独 来 说 明 下 这 些 情况 。 避 得 来 说 ， 
Vue.js 2.0 中 的 指令 功能 更 为 单一 ， 很 多 和 组 件 重 
复 的 功能 和 作用 者 进行 了 删除 ， 指 令 也 更 专注 于 
本 号 作用 域 的 操作 ， 而 尽量 不 去 影响 指令 外 的 
DOM 元 素 及 数据 。 


3.4.1 ”新 的 钧 子 函 数 


钩子 函数 增加 了 一 个 componentUpdated， 当 
整个 组 件 都 完成 了 update 状 仿 后 即 所 有 DOM 都 更 


新 后 调用 该 钩子 函数 ， 无 论 指令 接受 的 参数 是 人 否 
发 入 要 化 


3.4.2” 钩 于 男 数 实例 和 参数 变化 


在 Vuejs 2.0 中 取 光 了 指 侈 实例 这 一 概念 ， 下 
在 钧 子 函 数 中 的 this 并 不 能 指 癌 指令 的 相关 属性 
Rs 通过 参数 的 形式 传递 和 钩子 攻 


Vue.directive('my-directive', { 
bind : function(el, binding, vnode) { 
console.10g('~~~~~~~~~~ bind~~~~~~~~~ Re 
console.1log('el', el); 
console.1log('binding', binding); 
console.log('vnode', vnode); 


}, 
update : function(el, binding, vnode, oldVNode) 


}, 
componentUpdated(el, binding, vnode, oldVNode) { 


a 


unbind : function(el, binding, vnode) { 


} 
}); 


在 Vue.js 1.0 的 实例 中 的 属性 大 部 分 都 能 在 
binding 中 找到 ，vnode 则 主要 包含 了 广 扣 的 相 天 信 
已 ， 有 点 类 似 于 fragment 的 作用 。 


3.4.3 update 画 数 触发 变化 
钧 子 函数 update 对 比 Vue.js 1.0 也 有 了 以 下 两 点 


于 
@ 指令 绑 定 bind 函 数 执行 后 不 直接 调用 update 


@ 只 要 组 件 发 生 重 绘 ， 无 论 指 令 接 受 的 人 是 
否 发 生变 化 ， 均 会 调用 update 函 数 。 如 果 需 要 过 滤 
不 必要 的 更 新 ， 则 可 以 使 用 binding.value == 
binding.oldValue 来 判断 。 


3.4.4 ”参数 binding 对 象 


钩子 函数 接受 的 参数 binding 对 象 为 不 可 更 
改 ， 强 行 设 定 binding.value 的 值 并 不 会 引起 实际 的 
改动 。 如 果 非 要 通过 这 种 方式 进行 修改 的 话 ， 只 
能 通过 el 和 直接 修改 DOM 元 素 。 


第 4 章 ”过 滤器 


在 第 2 章 文 本 插值 中 我 们 提 到 过 ，Vue.js 人 允许 
0 
示 ， 例 如 


{{ message | capitalize }} 


过 滤 帮 的 本 质 十 一 个 芳 数 ， 接 受 管 这 从前 面 
的 值 作为 初始 值 ， 同 时 也 能 接受 额外 的 参数 ， 返 
回 值 为 经 过 处 理 后 的 输出 值 。 多 个 过 滤 絮 也 可 以 
进行 串联 。 例 如 : 


{{ message | filterA 'argi' 'arg2' }} 
{{ message | filterA | filterB}} 


我 们 也 列举 了 Vue.js 1.0 中 内 置 的 指令 来 说 明 
1 本 章 则 主要 来 讲 如 何 注 册 和 使 用 目 定 义 
过 滤 硕 。 


4.1 过滤 剖 注 册 


Vue.js 近 供 了 全 局 方法 Vue.filter0) 注 册 一 个 目 
定义 过 滤 絮 ， 接 受过 渡 兹 ID 和 过 涛 带 函 数 两 个 参 
数 。 例 如 : 


Vue.filter('date', function(value) { 
if(!value instanceof Date) return value; 
return value.toLocaleDateString(); 


}) 


这 样 注 册 之 后 ， 我 们 束 可 以 在 vm 实例 的 模板 
中 使 用 这 个 过 滤 带 了 。 


<div> 
{{ date | date }} 
</div> 
var vm = new Vue(L 
el : '#app', 


data: { 
date : new Date() 
} 
}); 


的 参数 。 例 如 : 


Vue.filter('date', function(value, format) { 
var oO={ 
"Mt"; value.getMonth() + 1，V// 月 份 
"d+": value.getDate(), // 日 
"h+"; value.getHours()，// 小 时 
"m+": value.getMinutes()，// 分 
"st+"; Vvalue.getSeconds()，// 秒 


上 


if (/(y+)/.test(format)) 
format = format.replace(RegExp.$1, 
(value.getFullYear() + "").substr(4 - 
RegExp.$1.1ength)); 
for (var k in 0o) 
If (new RegExp("(~ +k+")").test(format)) 
format = format.replace(RegExp.$1, 
(RegExp.$1.1length == 1) 
? (olk]) 
: (("00" + of[fk]).substr(("" + 
olk]).length))); 
return format; 


二 


使 用 方式 即 为 : 


<div> 
{{ date | date 'yyyy-MM-dd hh:mm:ss'}} //-> 
2016-08-10 09:55:35 即 可 按 格式 输出 当前 时 间 


</div> 


4.2 ” 双 癌 过 滤 锅 


之 前 所 太 的 过 滤 占 部 是 在 数据 输出 到 视图 之 
前 ， 对 数据 进行 转化 显示 ， 但 不 影响 数据 本 里 。 
Vue.js 也 提供 了 在 改变 视图 中 数据 的 值 ， 写 回 data 
铸 定 属性 中 的 过 滤 带 ， 称 为 双 癌 过 滤 带 。 例 如 : 


<input type="text" v-model="price | cents" > 
// 该 过 滤 右 的 作用 是 处 理 价 钱 的 转化 ， 一 般 数 据 库 中 保存 的 单位 都 
为 分 ， 避 免 浮 点 运 人 


Vue ,filter(' cents'，({ 
read : function(value) { 
return (value / 100).toFixed(2); 


write : function(value) { 
return Value * 100; 


} 
}); 


var vm = new Vuel(t 
1 


从 使 用 场景 和 功能 米 看 ， 双 癌 过 滤器 和 第 2 半 
中 提 人 到 的 计算 属性 有 点 雷同 。 而 Vue.js 2.0 中 也 取 
消 了 过 滤器 对 v-model、v-on 这 些 指令 的 支持 ， 认 
为 会 导致 更 多 复杂 的 情况 ， 而 且 使 用 起 来 并 不 方 
便 。 所 以 Vue.js 2.0 中 只 人 允许 开发 者 在 {{}} 标 签 中 
使 用 过 滤 硕 ， 像 上 述 对 写 哥 作 有 转化 要 求 的 数 
据 ， 建 议 使 用 计算 属性 这 一 特性 来 实现 。 


4.3 ”动态 参数 


过 滤 需 除了 能 接受 单 引 号 (") 括 起 来 的 参数 
外 ， 也 文 桂 接 受 在 vm 实 例 中 绑 定 的 数据， 称 之 为 
动 候 参数 。 使 用 区 别 台 在 于 不 需要 用 单 引 号 将 参 
数 括 起 来 。 例 如 : 


<input type="text" v-model="price" /> 
<span>{{ date | dynamic price }}</span> 


Vue.filter('dynamic', function(date, price) { 
return date.toLocaleDateString() + " : "+ 


var vm = new Vue(L 
el : '#app', 
data: { 
date : new Date(), 
price : 150 


}); 


过 滤器 中 接受 到 的 price 参 数 即 为 vm.price。 


4.4 ”过 滤器 在 Vue.js 2.0 中 的 变化 


过 滤 絮 在 Vue.js 2.0 中 也 发 生 了 一 些 变化 ， 大 
致 说 明 如 下 : 


中 取 谢 了 所 有 内 置 过 着 矿 ， 即 capitalize， 
uppercase, json 等 。 作 者 建议 尽量 使 用 单独 的 插件 
来 按 需 加 入 你 所 需要 的 过 滤器 。 不 过 如 有 果 你 觉得 
仍然 想 使 用 这 些 Vue.js 1.0 中 的 内 置 过 滤 右 ， 也 不 
是 什么 难 办 的 事 。1.0 源 但 filters/ 目 未 下 的 index.js 
和 array-filter.js 中 就 是 所 有 内 置 过 滤 絮 的 源码 ， 你 
可 以 挑选 你 想 用 的 手动 加 到 2.0 中 。 


@ 取消 了 对 v-model 和 Vv-on 的 支持 ， 过 小 絮 只 
能 使 用 在 {{}} 标 签 中 。 


@ 修改 了 过 减 右 参数 的 使 用 方式 ， 采 用 本 效 
的 形式 而 不 是 空格 来 标记 参数 。 例 如 : {{ date | 
date(yyyy-MM-dd') }} ° 


第 5 章 ” 过 渡 


过 流 系 统 是 Vue.js 为 DOM 动 男 效 果 提 供 的 一 
个 特性 ， 它 能 在 元 素 从 DOM 中 插入 或 移 除 时 触发 
你 的 CSS 过 渡 (transition) 和 动画 (animation) ， 
也 束 是 说 在 DOM 元 素 发 生变 化 时 为 其 添加 特定 的 
class 类 名 ， 从 而 产生 过 滤 效 打 。 除 了 CSS 过 湾 
外 ，Vue.js 的 过 小 系统 也 文 持 javascript 的 过 波 ， 通 
过 又 露 过 小 系统 的 钧 子 印 数 ， 我 们 可 以 在 DOM 变 
ee 产生 动画 效 


5.1 CSS 过 渡 

本 小 节 首 先 来 了 解 下 CSS 过 渡 的 用 法 。 
5.1.1 CSS 过渡 的 用 法 
首先 举 一 个 例子 来 说 明 CSS 过 渡 系统 的 使 用 


了 


<div v-if="show" transition="my-startup"></div> 
var vm = new Vue(L 
el : '#app', 


data: { 
show : false 


} 
}); 


百 先 在 模板 中 用 transition 绪 定 一 个 DOM 元 
系 ， 并 且 使 用 v-if 指 令 使 元 素 先 处 于 未 被 编译 状 
人 态 。 然 后 在 控制 台 内 手动 调用 vm.show = true, 就 
可 以 看 惠 DOM 元 系 最 后 输出 为 : 


<div class="my-startup-transition"></div> 


我 们 可 以 看 到 在 DOM 元 妹 完 成 编译 后 ， 过 小 
系统 目 动 给 元 系 添 加 了 一 个 my-startup-transition 的 
class 类 名 。 那 么 为 了 让 这 个 效果 更 明显 一 点 ， 还 
可 以 提前 给 这 个 类 名 添加 一 点 CSS 样 式 : 


.My-startup-transition { 
transition: all 1s ease; 


width: 100px; height: 100pX 
background: black; 
opacity: 1; 


此 时 再 重 狐 刷 狐 并 手动 运行 vm.show = true， 
发 现 最 终 样 式 效 果 和 是 加 载 上 去 了 ， 但 并 没有 出 现 
transition 的 效 打 。 这 是 由 于 在 编译 v-if 后 ，div 和 直接 
挂 载 到 body 并 添加 my-startup-transition 类 名 这 两 个 
过 程 中 浏 贤 妖 仪 进行 了 一 次 重 绘 ， 这 对 于 div 玉 说 
并 没有 产生 属性 的 更 新 ， 所 以 没有 执行 css 
transition 上 的 效果 。 为 了 解决 这 个 问题 ，Vue.js 的 过 
疲 系 统 给 元 又 搬入 及 移 除 时 分 别 添加 了 2 个 类 名 : 
*+-enter 逢 *#-leave，*# 即 为 transition 绑 定 的 字符 串 ， 
本 例 中 即 为 my-startup。 所 以 ， 在 上 还 例子 中 ， 我 
们 还 需要 添加 两 个 类 名 样式 ， 即 my-startup-enter, 


my-startup-leave: 


.Mmy-startup-enter, .my-startup-leavef{ 
height: QOpx; 
opacity: 0; 


| 


此 时 再 旦 复 之 于 的 操作 ， 丈 可 以 看 到 过 小 歼 
有 末了。 需要 注意 的 是 ， 这 两 个 类 名 的 优 移 级 需 
高 于 .my-startup-transition， 不 然 被 my-startup- 


transition 黎 善后 束 失 效 了 。 


同样 ， 我 们 也 可 以 通过 CSS 的 animation 属 性 
来 实现 过 渡 的 效果 ， 例 如 ; 


<style> 
.my-animation-transition { 
animation: increase 1s ease 0s 1; 
width: 100px; 
height: 100px; 
background: black; 


.my-animation-enter, .my-animation-leave { 
height: Opx; 


@keyframes Increase { 
from { height: Opx; } 
to { height: 100px; } 


</style> 
<div v-if="animation" transition="my- 
animation">animation</div> 


var vm = new Vue(L 
el : '#app', 
data: { 


animation : false 


同样 ， 更改 vm.animation 为 true 后 即 可 看 到 过 
流 效 果 。 


除了 和 直接 在 元 系 上 添加 transition="name" 外 ， 
Vue.js 也 文 持 动 态 绑 定 CSS 名 称 ， 可 用 于 元 素 需 
多 个 过 滤 殖 果 的 场景 。 例 如 : 


<div VvV-if="show”" v-bind:transition=" 
transitionName"></div> 

// 也 可 以 简写 成 

<div v-if="show" :transition="transitionName"> 
</div> 


var vm = new Vuel(t 
el: '#app', 
data: { 
show: false, 
transitionName: 'fade' 


} 
}); 


Vue.js 本 喘 并 不 提供 内 置 的 过 渡 CSS 样 式 ， 仅 
仅 是 提供 Ft 了 过 渡 需 要 使 用 的 样式 的 加 载 或 移 除 时 
J 这 样 更 便于 我 们 灵活 地 按 需 去 设计 过 渡 样 
式 。 


5.1.2 CSS 过 渡 钧 子 函 数 
Vue.js 提 供 了 在 插入 或 DOM 元 素 时 类 名 变化 


的 钩子 函数 ， 可 以 通过 Vue.transition(Cname', {}) 的 
方式 来 执行 具体 的 本 数 操作 。 例 如 : 


Vue.transition('my-startup', { 

beforeEnter: function (el) { 
console.1log('beforeEnter', el.classNanme); 

让 

enter: function (el) { 
console.log('enter', el.className); 

上 

afterEnter: function (el) { 
console.1log('afterEnter', el.className); 

+} 

enterCancelled: function (el) { 
console.log('enterCancelled', el.classNanme); 


beforeLeave: function (el) { 
console.1log('beforeLeave', el.classNanme); 

leave: function (el) { 
console.1log('leave', el.className); 


}, 


afterLeave: function (el) { 
console.1log('afterLeave', el.className); 

}, 

leaveCancelled: function (el) { 
console.1log('leaveCancelled', el.classNanme); 


}) 


在 控制 台 里 执行 vm.show = true， 输 出 结果 如 


vm. show = true 
beforeEnter my-startup-—transition 

enter my-startup-transition my-startup-enter 
true 

afterEnter my-startup-transition 


这 样 ， 我 们 能 很 清楚 地 看 到 和 钧 子 函数 执行 的 
顺序 以 及 元 素 类 名 的 变化 。 同 样 的 ， 还 可 以 再 次 
更 改 vm.show 的 值 置 为 false， 结 果 如 下 : 


vm. Show = false 

beforeLeave my-startup-—transition 

leave my-startup-transition my-startup-Leave 
false 


afterLeave my-startup-transition 


由 于 元 素 在 使 用 CSS 的 transition 和 animation 
上 时， 系统 的 流程 不 完全 一 样 。 所 以 多 以 transition 
为 例 ， 总 结 下 过 小 系统 的 流程 。 

当 vm.show = true 时 ， 

@ 调用 beforeEnter 芳 数 。 

@ 添加 enter 类 名 到 元 录 上 。 

@ 将 元 素 插入 DOM 中 。 

@ 调用 enter 函 数 。 


@ 强制 reflow 一 次 ， 然 后 移 除 enter 类 名 ， 解 
发 过 渡 效 果 。 


@ 如 果 此 时 元 到 被 删除 ， 则 触发 
enterCancelled 了 芳 数 。 


@ 监听 transitionend 事 件 ， 过 小 结束 后 调用 
afterEnter[ 汶 效 ( 。 


当 vm.show = false 时 ， 


@ 调用 beforeLeave 芳 数 。 


@ 添加 v-leave 类 名 ， 触 发 过 小 效果 。 
@ 调用 leave 畏 数 。 


@ 如 果 此 时 元 到 被 删除 ， 则 触发 
leaveCancelled 了 芳 数 。 


@ 监听 transitionend 事 件 ， 删 除 元 又 及 *-leave 
类 名 。 
© 调用 afterLeave 罚 数 。 
如 果 使 用 animation 作 为 过 渡 的 话 ， 在 DOM 插 


入 时 ，*-enter 类 名 不 会 立即 被 删除 ， 而 是 在 
animationend 事 件 和 触发 式 删除 。 


另外 ，enter 和 leave 函 数 都 有 第 二 个 可 选 的 回 
调 参数 ， 用 于 控制 过 滤 何 时 结束 ， 而 不 是 监听 
transitionend 和 animationend 事 件 ， 例 如 


<style> 
my-done-transition { 
transition: all 2s ease; 
width: 100px; height: 100px; 
background: black; 
opacity: 1; 


.Mmy-done-enter, .my-done-leavet 


height: Opx; 
opacity: 0; 


} 
</style> 
Vue.transition('my-done', { 
enter: function (el, done) { 
this.enterTime = new Date(); 
setTimeout(done, 500); 


afterEnter: function (el) { 
console.1log('afterEnter', new Date() - 
this.enterTime); 
} 
}) 


var vm = new Vue(L 
el : '#app', 
data: { 
done : false 


} 
}); 


此 时 afterEnter 芳 数 执行 的 时 间 束 不 是 my- 
done-transition 样 式 中 的 2s 之 后 ， 而 是 done 调 用 的 
500ms 之 后 。 需 要 注意 的 是 ， 如 果 在 enter 和 leave 


中 声明 了 形 参 done， 但 没有 调用 ， 则 不 会 触发 
afterEnter 函 数 。 


5.1.3 ”显示 声明 过 渡 类 型 


Vue.js 可 以 指定 过 滤 元 系 监 昕 的 结束 事件 的 类 
型 ， 例 如 


Vue.transition('done-type', 
type: 'animation' 


}) 


此 时 Vue.js 束 只 监听 元 隶 的 animationend 事 
件 ， 避 免 元 素 上 还 存在 transition 时 导致 的 结束 事 
件 触发 不 一 致 。 


5.1.4” 目 定义 过 渡 类 名 


除了 使 用 默认 的 类 和 名 *-enter *-leave 外 ， 
Vue.js 也 人 允许 我 们 目 定 义 过 小 类 名 ， 例 如 : 


Vue.transition('my-startup', { 


enterClass: 'fadeIn', 
JeaveClass: 'fadeOut' 


}) 


我 们 可 以 通过 上 述 钓 子 范 数 的 例子 ， 观 测 元 
素 的 类 名 变化 : 


Vm. Show = 《TUE 


beforeEnter my-startup-transition 
enter my-startup-transition fadeIn 
true 

afterEnter my-startup-transition 
vm. show = false 

beforeLeave my-startup-transition 
leave my-startup-transition fade0ut 
false 

afterLeave my-startup-transition 


a 


Vue.js 官 方 推荐 了 一 个 CSS 动 画 库 ， 
animate.css， 配 合 目 定义 过 洲 尖 名 使 用 ， 可 以 达 
到 非常 不 错 的 效果 。 只 需要 引入 一 个 CSS 文 件 ， 
http://cdn.bootcss.com/animate.css/3.5.2/animate.min 


.css ， 怠 可 以 使 用 里 面 的 预 设 动画 。 例 如 : 


<div v-if="animateShow" class="animated" 
transition="bounce">bounce effect</div> 
Vue.transition('bounce', { 


enterClass: 'bounceIn', 
leaveClass: 'bounceOut' 


}) 


在 使 用 animate.css 时 ， 和 需要 先 给 元 宁 附 上 
animated 类 名 ， 人 然后 再 添加 预 设 的 动 效 类 名 ， 例 
如 上 例 中 的 bounceIn、bounceOut， 这 样 束 能 看 到 
动画 效果 。 这 个 库 提供 了 多 种 强调 展示 (例如 弹 
性 、 拌 动 ) 、 渐 入 潮 出 、 翻 转 、 旋 转 、 放 大 缩小 
等 效 末 。 所 有 的 效果 可 以 访问 官方 网 址 
https://daneden.github.io/animate.css/ 在 线 观 看 。 


5.2 JavaScript 过滤 


Vue.js 也 可 以 和 一 些 JavaScript 动 画 库 配 合 使 
用 ， 这 里 只 需要 调用 JavaScript 钧 子 范 数 ， 而 不 需 
要 定义 CSS 样 式 。transition 接 受 选 项 css:false， 将 
直接 跳 过 CSS 检 测 ， 避 免 CSS 规 则 干扰 过 渡 ， 而 且 
需要 在 enter 和 leave 钧 子 函 数 中 调用 done 函 数 ， 明 
确 过 滤 结 束 时 间 。 此 处 将 引入 Velocity.js 来 配合 使 
用 JavaScript 过 湾 


5.2.1 Velocity.]js 


Velocity.js 是 一 款 高 效 的 动画 引擎 擎 ， 可 以 单独 
使 用 也 可 以 配合 jQuery 使 用 。 它 拥有 和 jQuery 的 
animate 一 样 的 api 接 口 ， 但 比 jQuery 在 动画 处 理 方 
面 更 强大 、 更 流畅 ， 以 及 模拟 了 一 些 现实 世界 的 
运动 ， 例 如 弹性 动画 等 


Velocity.js 可 以 当做 jQuery 的 插件 使 用 ， 例 
[: 


$element .Velocity({ left: "100px"}, S500, "swing", 
function(){console.log("done")}); 
$element .velocity({ left: "100px"}, { 

duration: 500, 

easing: "swing", 

complete : function(){console.log("done");} 


}); 


也 可 以 单独 使 用 ， 例 如 : 


var el = document.getElementById(id); 
Velocity(el, { left : '100px' }, 500, 'swing', 
done ) ; 


5.2.2 ” JavaScript 过 渡 使 用 


我 们 可 以 通过 以 下 方式 注册 一 个 目 定义 的 
JavaScript 过 渡 : 


<style> 

.My-velocity-transition { 
position: absolute; top:Opx; 
width: 100px; height: 100px; 
background: black; 


</style> 
<div v-if="velocity" transition="my-velocity"> 
</div> 
Vue.transition('my-velocity', { 

css : false, 

enter: function (el, done) { 

Velocity(el, { left : '100px' }, 500, 'swing', 

done ) ; 


enterCancelled: function (el) { 
Velocity(el, 'stop'); 


leave: function (el, done) { 
Velocity(el, { left : 'Opx' }, 500, 'swing', 
done ); 


了 


leaveCancelled: function (el) { 
Velocity(el, 'stop'); 


}) 


运行 上 述 人 代码， 在 设置 vm.velocity = true 后 ， 
过 滤 系 统 即 会 调用 enter 钧 子玉 数 ， 通 过 Velocity 对 
DOM 操 作 展 现 动 画 效 果 ， 然 后 强制 调用 done 咖 
数 ， 明 硝 结束 过 洲 歼 宋 。 


5.3 “过 小 系统 在 Vue.js 2.0 中 的 变 
化 
过 流 系 统 在 Vue.js 2.0 中 也 发 生 了 比较 大 的 变 


化 ， 信 监 了 ReactJS CSSTransitionGroup 的 一 些 相 
关 没 定 和 命 全 名 。 


5.3.1 用 法 变化 


新 的 过 滤 系 统 中 取消 了 V-transition 这 个 指 
， 新 增 了 名 为 transition 的 内 置 标签 ， 用 法 变更 


亲人 


<transition name="fade"> 
<div class="content" v-if="show">content</div> 
</transition> 


transition 标 签 为 一 个 抽象 组 件 ， 并 不 会 额外 
演 染 一 个 DOM 元 素 ， 仪 仅 是 用 于 包 于 过 渡 元 素 及 
触发 过 渡 行 为 。v-if、v-show 等 指令 仍旧 标记 在 内 
容 元 系 上 ， 并 不 会 作用 于 transition 标 丛 上 


transition 标签 能 接受 的 参数 与 Vue.js 1.0 中 注 
册 的 transition 接 受 的 选项 类 似 。 


1. name 


同 v-transition 中 接受 的 参数 ， 目 动 生 成 对 应 


的 name-enter name-enter-active 关 名 。 


2. appear 
元 系 百 次 洽 染 的 时 候 十 人 否 局 用 transition ， 默 


认 全 为 false。 即 v-if 绑 定 值 初 始 为 true 时 ， 百 次 渔 
染 时 是 否 调用 transition 效 果 。 在 Vue.js 1.0 中 ，v-if 


如 采 初 始 值 为 true 的 话 ， 首 次 泻 染 是 无 法 使 用 
transition 歼 果 的 ， 只 有 v-show 能 使 用 。 


3. css 


后 Vue.js 1.0 的 CSS 选 项 ， 如 果 设 置 为 tue， 则 
只 监听 钩子 函数 的 调用 。 


4. type 


同 Vue.js 1.0 的 type 先 项， 设置 监听 CSS 动 画 结 
束 事件 的 类 型 。 


5. mode 


控制 过 渡 插 入 / 移 除 的 先后 顺序 ， 主 要 用 于 元 
素 切 换 时 。 可 供 选 泉 的 值 有 “out-in” “in-out”， 如 
采 不 设置 ， 则 同时 调用 。 例 如 : 


<transition name="fade" mode="out-in "> 
<p :key="ok">{{ok}}</p> // 这 里 的 :key='ok' 主 要 用 
于 强制 伏 换 元 素 ， 展 现 出 in-out/out-in 效 果 


</transition> 


当 ok 在 true 和 false 切 换 时 ，mode=“out-in” 决 定 
先 移 除 <p>false</p>， 等 过 小 结束 后 ， 再 插入 
<p>true</p> 元 系 ，mode=“in-out” 则 相反 。 


6 .钩子 函数 


enterClass, leaveClass, enterActiveClass, 
leaveActiveClass, appearClass, appearActiveClass, 


可 以 分 别 目 定义 各 阶段 的 class 类 名 。 


总 得 来 说 ， 在 Vue.js 2.0 中 我 们 可 以 直接 使 用 
transition 标 俭 并 设 定 其 属性 来 定义 一 个 过 洲 效 
果 ， 而 不 需要 像 在 Vue.js 1.0 中 通过 Vue.transition() 
语句 来 定义 。 例 如 : 


<transition 
name="fade" 
mode="out-in" 


appear 
@before-enter="beforeEnter" 
Q@enter="enter" 
@after-enter="afterEnter" 
@appear="appear" 


@before-leave="beforeLeave" 
@leave="leave" 
@after-leave="afterLeave" 
@leave-cancelled="leaveCancelled" 
> 
<div class="content"™" v-if="ok">{{ ok }}</div> 


</transition> 


5.3.2 ”类 名 变化 


从 上 述 属 性 的 变化 中 我 们 可 以 看 出 ，Vue.js 
2.0 中 新 增 了 两 个 类 名 enter-active 和 ]eave-active， 
用 于 分 离 元 素 本 吴 样 式 和 过 滤 样 式 。 我 们 可 以 把 
过 渡 样 式 放 到 *-enter-active、*-leave-active 中 ，*- 
enter，*-leave 中 则 定义 元 素 过 滤 前 的 样式 ， 而 元 
素 原 本 的 样式 则 由 目 己 的 类 名 去 控制 ， 不 和 过 波 
系统 目 动 添加 的 类 名 样式 混合 起 来 。 举 个 例子 : 


content { 
width: 100px; height: 100px; 
background: black; opacity: 1; 


.fade-enter, .fade-leave-activet 
opacity: 0; 


.fade-enter-active, .fade-leave-activetf 
transition: all 3s ease; 


<transition name="fade"> 
<div class="content" Vv-if="ok"></div> 
</transition> 


ER 


这 样 ， <transition fade=' name"></transition> 
整 可 以 当做 一 个 可 复 用 的 过 渡 元 素 ， 作 用 到 你 期 
户 的 元 又 上 。 


enter-active 添 加 到 元 素 上 的 时 机 是 在 元 素 插 
入 DOM 树 后 ， 在 transition/animation 结 束 后 从 元 素 
上 移 除 。leave-active 则 在 DOM 元 素 开 始 移 除 时 钰 
加 上 上， 在 transition/animation 结 束 后 移 除 。 


5.3.3 ”钩子 函数 变化 


Vue.js 2.0 中 添加 了 三 个 新 的 钩子 函数 ， 
before-appear appear 和 after-appear。appear 主 要 是 
用 于 元 系 的 首次 演 染 ， 如 条 同时 声明 了 enter 和 
appear 的 相关 钩子 函 效 ， 元 妹 首 次 洽 染 的 时 候 会 
使 用 appear 系 钧 于 函数 ， 再 次 泻 染 的 时 候 才 使 用 
enter 系 钩子 函数 。 例 如 : 


<transition 


name="fade" mode="in-out" appear 
@before-enter="beforeEnter" 
@enter="enter" 
@after-enter="afterEnter" 


Q@appear= appear 


@before-leave="beforeLeave" 

@leave="leave" 

@after-leave="afterLeave" 
> 

<div class="content" v-if="ok">{{ ok }}</div> 
</transition> 
var vm = new Vuel(t{ 

el : '#app', 

data : { 

ok : true 


methods : { 

beforeEnter : function(el) { 
console.1log('beforeEnter', el.classNanme); 

人 

enter : function(el) { 
console.log('enter', el.className); 

Bo 

afterEnter : function(el) { 
console.1log('afterEnter', el.className); 

Bo 

appear : function(el) { 
console.1log('appear', el.className); 

i 

beforeLeave : function(el) { 
console.1log('beforeLeave', el.classNanme); 

外 

Leave : function(el) { 
console.log('leave', el.className); 

下 

afterLeave : function(el) { 
console.1log('afterLeave', el.className); 


}, 


}); 


男 外 ， 取 消 了 Vv-ifH 时 的 leave-cancelled， 元 于 
一 旦 被 移 除 则 不 能 俘 止 该 操作 。 但 使 用 v-show 
H 秆 ，leave-cancelled 钓 子 仍然 有 效 。 我 们 可 以 沿用 
上 面 这 个 例子 ， 在 transition 上 加 一 个 钧 子 函 数 
@]leave-cancelled="leaveCancelled"， 将 元 系 设 置 
成 <div class="content" v-if="ok">{{ ok }}</div>, 
<div class="content" v-show="ok">{{ ok }}</div> 
两 种 情况 ， 然 后 手动 设置 vm.ok = false, 并 在 元 素 
仍 在 过 渡 中 设置 vm.ok = true。 在 v-if 情 况 下 ， 元 
素 继续 进行 leave transition， 在 transition 结 束 后 再 
次 进行 enter 过 渡 ; 而 在 v-show 情 况 下 ， 元 素 则 下 


接 人 停止 了 leave transition, 并 调 用 了 leaveCancelled 
钓 子 男 数 ， 然 后 直接 进行 耻 enter 过滤。 


5.3.4 transition-group 


除了 内 置 的 transition 标 丛 外 ，Vue.js 2.0 提 供 
了 transition-group 标 伟 ， 方 便 作 用 到 多 个 DOM 元 
素 上 。 例 如 : 


<transition-group tag="ul" name="]ist"> 
<1i v-for="item in items" :key="item.id"> 
{{ item.text }} 
</1i> 
</transition-group> 


transition-group 的 主要 作用 是 给 其 于 元 系 设 定 
一 个 统一 的 过 渡 样式 ， 而 不 需要 给 每 单个 元 素 都 
用 transition 包 囊 起 来 。 


和 transition 标 签 不 一 样 ，transition-group 个 是 
一 个 虚拟 DOM， 会 真实 泻 染 在 DOM 权 中。 默认 
会 是 span 标 签 ， 但 我 们 也 可 以 通过 属性 tag 来 议 
定 ， 如 上 例 中 transition-group 最 终 和 输出 的 会 是 一 个 


ul 标签 。 A, 我 们 包 避 以 通 过 <ul is="transition- 
group"> 这 样 的 写法 来 设 定 标签 


transition-group 接 收 的 参 效 和 transition 基 本 一 
致 ， 但 不 文 持 mode 参 数 ， 而 且 每 个 transition- 
group 的 子 元 素 都 需要 包含 唯一 的 key， 如 上 例 中 
的 key=item.id。 


我 们 可 以 补 全 上 面 的 代码 ， 作 为 一 个 完整 的 
transition-group 例 子 : 


<style> 
.1]ist-1i { 
width: 100px; height: 20px; 
transform: translate(0, 0); 


.1]ist-enter, .list-leave-activet 
opacity: 0; transform: translate(-30px, 0); 


.]ist-enter-active, .list-leave-activetf 
transition: all 0.5s ease; 


</style> 
<transition-group tag="ul" name="1list" appear> 
<1i v-for="item in items" :key="item.id" 
class="]1ist-1i"> 
{{ item.text }} 
</1i> 
</transition-group> 
var vm = new Vue(L 
el : '#app', 
data : { 


Items [ 
{ id : 1, text : 
{ id : 2, text : 
{ Id : 3, text 
{ id : 4, text : 
] 
} 
}) 


rT 
"99" 


: '33! 


144: 


我 们 可 以 在 控制 台 里 对 vm.items 进 行 push 或 
splice 控 作 ， 这 样 束 能 看 到 li 标签 的 过 小 效果 了 。 


第 6 章 ”组 件 


代码 复 用 一 直 古 软件 开发 中 长 期 存在 的 一 个 
问题 ， 每 个 开发 痢 都 想 再 次 使 用 之 前 写 好 的 代 
码 ， 又 担心 引入 这 段 代码 后 对 现 有 的 程序 产生 影 
啊 。 从 jQuery 开始 ， 我 们 融 开 始 通过 插件 的 形式 复 
用 代码 ， 到 Requirejs 开 始 将 js 文件 模块 化 ， 按 需 加 
载 。 这 两 种 方式 都 提供 了 比较 方便 的 复 用 方式 ， 
但 往往 还 需要 目 己 手动 加 入 所 需 的 CSS 文 件 和 
HTML 模 块 。 现 在 ，Web Components 的 出 现 提供 
了 一 种 新 的 思路 ， 可 以 目 定 义 tag 标 签 ， 并 拥有 目 
号 的 檬 板 、 样 式 和 交互 。Angularjs 的 指令 ， 
Reactjs 的 组 件 化 都 在 往 这 方面 做 答 试 。 同 样 ， 
Vue.js 也 提供 了 目 己 的 组 件 系统 ， 文 持 目 定义 tag 和 
原生 HTML 元 素 的 扩展 。 


6.1 组 件 注册 


Vue.js 创 建 组 件 构造 布 的 方式 非 音 简单， 在 本 
书 第 2.5 革 的 时 候 也 提 人 到 过 : 


var MyComponent = Vue.extend({ ... }); 


| 


这 样 ， 我 们 吏 获 得 了 一 个 组 件 和 构造 萌 ， 但 现 
在 还 无 法 直接 使 用 这 个 组 件 ， 需 要 将 组 件 注 册 到 
应 用 中 。Vue.js 控 供 了 两 种 注册 方式 ， 分 别 走 全 局 
注册 和 局 部 注册 。 


6.1.1 全 局 注册 
全 局 注册 需要 确保 在 根 实例 初始 化 之 前 注 


册 ， 这 样 才 能 使 组 件 在 任意 实例 中 家 使 用 ， 注 册 
为 3 


Vue.component('my-component', MyComponent); 


这 条 语句 需要 写 在 var vm = new Vue({...}) 之 
表 ， 注 册 成 功 之 后 ， 吏 可 以 在 模块 中 以 目 定义 元 
系 <my-component> 的 形 陈 使 用 组 件 。 对 于 组 件 的 
命名 ，W3C 规 范 是 字母 小 写 且 包含 一 个 短 横 
杠 “-”，Vue.js 暂 不 强制 要 求 ， 但 官方 建议 遵循 这 个 
规则 比较 好 。 


整个 使 用 方法 代码 如 下 : 


<div id="app"> 
<my-component></my-component> 
</div> 


var MyComponent = Vue.extend({ 
template : '<p>This is a component</p>' 


}) 


Vue.component('my-component', MyComponent) 


var vm = new Vuel(t{ 
'#app' 
}); 


输出 结 采 如 下 : 


<div id="app"> 
<p>This is a component</p> 
</div> 


6.1.2 局 部 注册 


局 部 注册 则 限定 了 组 件 只 能 在 被 注册 的 组 件 
中 使 用 ， 而 无 法 在 其 他 组 件 中 使 用 ， 注 册 方 式 如 
业 ， 


var Child = Vue,extend ({ 
template : '<p>This is a child component</p>， 


二 


var Parent = Vue.extend({ 
template: '<div> \ 
<p>This is a parent component</p> \ 
<my-child></my-child> 和 
</div>", 


components: { 
'my-child': Child 


} 
}); 


输出 结 来 即 为 : 


<div> 


<p>This is a parent component</p> 
<p>This is a child component</p> 
</div> 


而 如 采 在 根 实例 中 调用 <my-child></my- 
child>， 则 会 抛 出 异 音 [Vue warn]: Unknown 
custom element: <my-child> - did you register the 
component correctly? For recursive components, 
make sure to provide the "name" option. 


6.1.3 ”注册 语法 糖 


Vue.js 对 于 上 述 两 种 注册 方式 也 提供 了 何 化 的 
方法 ， 我 们 可 以 直接 在 注册 的 时 候 定 义 组 件 构 造 
俐 1 远 项 ， 例 如 : 


// 全 局 注册 
Vue.component('my-component', { 
template : '<p>This is a component</p>' 


}) 
// 局 部 注册 
var Parent = Vue.extend({ 
template: '<div> \ 
<p>This is a parent component</p> \ 
<my-child></my-child> \ 
</div>", 
components: { 
'my-child': { 
template : '<p>This is a child 


component</p>， 


} 
}); 


6.2 ”组 件 选 项 


组 件 接受 的 选项 大 部 分 与 Vue 实 例 一 样 ， 相 同 
的 部 分 本 章 束 不 资 述 了 ， 主 要 说 明 一 下 两 痢 的 区 
别 和 组 件 选 项 中 的 props， 用 于 接受 父 组 件 传递 的 


参数 。 


6.2.1 组 件 选 项 中 与 Vue 选 项 的 区 别 


组 件 选 项 中 的 el 和 data 与 Vue 构造 右 选项 中 这 
两 个 属性 的 赂 值 会 稍微 有 些 不 同 。 在 Vue 构 造 絮 中 
是 直接 赋值 : 


var vm = new Vue(t{ 
el : '#app', 
data : { 
name : 'Vue' 


} 
}) 


而 在 组 件 中 需要 这 人 么 定义 : 


var MyComponent = Vue.extend({ 
data : function() { 
return { 


name : 'component' 


这 是 因为 MyComponent 可 能 会 拥有 多 个 实 
例 ， 例 如 在 某 个 组 件 模板 中 多 次 使 用 <my- 
component></my-component>。 如 采 将 对 象 data 直 
接 传 递 给 了 Vue.extend({})， 那 所 有 MyComponent 
的 实例 会 共 吝 一 个 data 对 象 ， 所 以 需要 通过 函数 来 
返回 一 个 新 对 象 。 同 样 ，el 也 是 这 么 处 理 ， 只 不 过 
在 组 件 中 通过 el 来 直接 设 定 挂 载 元 又 的 情况 比较 少 
见 ， 目 然 避免 了 这 种 情况 。 


6.2.2 ”组 件 Props 


选项 props 征 组 件 中 非常 重要 的 一 个 选项 ， 起 
到 了 父子 组 件 间 桥架 的 作用 。 


首先 ， 需 要 明确 的 是 ， 组 件 实例 的 作用 域 是 
孤立 的 ， 也 束 是 说 子 组 件 的 模板 和 模块 中 是 无 法 
直接 调用 父 组 件 的 数据 ， 所 以 通过 props 将 父 组 件 
的 数据 传递 给 子 组 件 ， 子 组 件 在 接受 数据 时 需要 
显 式 再 明 props， 例 如 : 


Vue.component('my-child', 
props : [parent ']， 
template: '<p>{{ parent }} is from parent 


}) 
<my-child parent="This data"></my-child> //-> 


<p>This data is from parent </p> 


这 束 是 props 的 基本 使 用 方法 ， 为 外 还 有 几 所 
细 慷 会 进行 评 细 说 明 。 


同 指令 等 情况 相同 ， 由 于 HTML 属 性 不 区 分 
大 小 写 ， 如 有 果 我 们 在 <my-child> 中 的 属性 使 用 驼 峰 
了 式 myParam 命 名， 即 <my-child myParam='...>， 屠 
在 props 中 的 命名 即 为 props: ['myparam']。 所 以 如 果 
需要 使 用 驼峰 式 命 名 的 话 ， 我 们 需要 在 标签 中 使 
用 my-param， 用 “-” 的 方式 阳 开 ， 这 样 在 props 中 整 
可 以 使 用 props: [myParam'] 的 形式 进行 声明 。 


2 .动态 Props 


除了 上 述 例子 中 传递 静 仿 数据 的 方式 外 ， 我 
们 也 可 以 通过 v-bind 的 方式 将 父 组 件 的 data 数 据 传 
建 给 于 组 件 ， 例 如 : 


<div id="app"> 
<input type="text" v-model="message" /> 
<my-component v-bind:message="message"></my- 
component> 
</div> 
var MyComponent = Vue.extend({ 
props : ['message'|], 
template : "<p>{{ 'From parent : ' + message }} 
</p>" 
}) 


Vue.component('my-component', MyComponent ) ; 


var vm = new Vue(t{ 
el : '#app', 
data : { 
message : 'default' 


}); 


这 样 我 们 在 更 改 根 实例 message 的 值 的 时 候 ， 
组 件 中 的 值 也 随 之 改动 。 除 了 v-bind 外 ， 也 可 以 直 
接 人 简写 成 <my-component :message="message"> 
</my-component> ° 


需要 注意 的 是 如 果 直 接 传递 一 个 数值 给 子 组 
件 ， 束 必须 借助 动态 Props。 如 果 通 过 <my- 
component :message="1"></my-component> 这 种 方 
陈 传 递 的 话 ， 则 在 子 组 件 中 获取 的 message 其 实 是 
只 有 通过 如 下 的 方式 ， 才 能 准确 传递 


<my-num :num="Nnum"></my-num> 
Vue.component('my-num', { 

props : ['num'], 

template : "<p>{{ num + ' is a ' + typeof num }} 


var vm = new Vue({ 
el : '#app', 
data : { 
num ; 1 


} 


) ; 
// 输出 <p>1 is a _ number</p> 


3. 绑 定 类 型 


在 动态 绑 定 中 ，v-bind 指 令 也 提供 了 几 种 修 师 
符 来 进行 不 同方 式 的 绑 定 。Props 绑 定 默认 旦 单 回 
绑 定 ， 即 当 父 组 件 的 数据 发 生变 化 时 ， 了 于 组 件 的 
数据 随 之 变化 ， 但 在 子 组 件 中 修改 数据 并 不 影响 
父 组 件 。 修 饰 从 .sync 和 .once 显 示 的 声明 绑 定 为 双 
回 或 单 次 绑 定 ， 例 如 ; 


<div id="app"> 
<div> 
Parent component: <input type="text" v- 
model="msg" /> 
</div> 
<my-bind :msg="msg"></my-bind> 
</div> 


Vue.component('my-bind', { 
props : ['msg'], 
template : '<div> \ 
child component : \ 
<input type="text" v-model="msg"/> \ 
</div>" 


小 


var vm = new Vuel({ 


el : '#app', 
data : { 
msg :; "! 
} 
}); 


代码 结果 如 下 ， 


Parent component: 123 
Child component : 1232323 


此 时 父子 组 件 中 的 即 是 单 向 绑 定 ， 可 以 通过 
input 修 改 子 组 件 中 的 值 并 不 影响 父 组 件 中 的 值 。 


而 如 果 将 上 壕 例 子 中 <my-bind :msg="msg"> 
</my-bind> 巷 换 成 <my-bind :msg.Sync="msg"> 
</my-bind>， 则 在 子 组 件 的 input 中 修改 值 即 会 影 
咖 父 组 件 的 值 。 


Parent component: 1232323 
Child component : | 1232323| 


once 修 镀 符 意味 着 单 次 绑 定 ， 子 组 件 接受 一 
次 父 组 件 传递 的 数据 后 单独 维护 这 份 数据 ， 既 
\ 影 啊 父 组 件数 据 也 不 受 其 影响 而 更 靳 。 


需要 注意 的 是 ， 由 于 Vue.js 处 理 的 方式 是 引用 
传 冲 ， 所 以 如 采 prop 传 递 的 征 一 个 对 和 象 或 数组 ， 
那 在 于 组 件 内 进行 修改 束 会 影响 父 组 件 的 状态 ， 
即使 是 单 癌 绑 定 也 一 样 。 


4. Props 验 证 


组 件 可 以 指定 props 验 证 要 求 ， 这 对 开发 第 三 
方 组 件 来 说 ， 可 以 让 使 用 者 更 加 准确 地 使 用 组 
件 。 使 用 验证 的 时 候 ，props 接 受 的 参数 为 json 对 
象 ， 而 不 古 上 还 例子 中 的 数组 ， 例 如 : props : {a: 
Number }， 即 为 验证 参数 a 需 为 Number 类 型 ， 如 果 
调用 该 组 件 传 入 的 a 参数 为 字符 串 ， 则 会 抛 出 异 
第 。Vue.js 提 供 的 Props 验 证 方式 有 很 多 种 ， 下 面 巡 


1) 基础 类 型 检测 : prop: Number， 接 受 的 参 
数 为 原生 构造 闫 ，String、 Number、Boolean、 
Function、Object、Array。 人 也 可 接受 null， 和 意味 任 
意 类 型 均 可 。 


2) 多 种 类 型 : prop:[Number String]， 允许 参 
数 为 多 种 类 型 之 一 ， 例 如 类 型 可 以 为 数值 或 字符 


串 。 


3) 参数 必需 : prop: { type : Number required: 
true}， 参 数 必须 有 值 且 为 Number 类 型 。 


4) 参数 默认 : prop: { type : Number, default : 
10 }， 参 数 具 有 默认 值 10°。 需要 注意 的 是 ， 如 果 默 
认 值 设置 为 数组 或 对 象 ， 需 要 像 组 件 中 data 属 性 那 
样 ， 通 过 了 芳 数 返回 值 的 形式 巍 值 ， 如 : 


prop : { 
type : Object, 
default : Tunet ion() { 
'Q 


return { a.: 


5) 绑 定 类 型 : prop: { twoWay : ;true}, 校 验 绪 
定 关 型 ， 如 采 非 双 同 绑 定 会 抛 出 一 条 和 警 千 。 


6) 目 定义 验证 函数 : prop : {validator : 
function(value) { return value > 0; } }， 难 证 值 必须 


大 于 0 。 


7) 转换 值 : prop: { coerce : function(val) { 
return parseInt(val) }}， 将 字符 串 转 化 成 数值 。 


在 开发 环境 中 ， 如 来 验证 失败 了 ，Vue 将 抛 出 
一 条 警告， 组 件 上 也 无 法 设置 此 值 。 


在 Vue.js 2.0 中 ， 验 证 属性 [woWay 和 coerce 均 
做 废弃 。 由 于 组 件 间 只 文 持 单 回 绑 定 ， 所 有 
twoWay 的 校 验 也 束 不 存在 了 。 而 coerce 的 用 法 和 
计算 属性 过 于 类 似 ， 所 以 也 被 上 废弃， 官方 推 荐 使 
用 计算 属性 代替 。 


6.3 ”组件 间 通 信 


组 件 间 通信 十 组 件 开 发 时 非常 重要 的 一 环 ， 
我 们 既 布 望 组 件 的 独立 性 ， 数 据 能 互 不 干 水， 又 
不 可 如 人 免 组 件 间 会 有 联系 和 交互 。Vue.js 在 组 件 间 
通信 这 一 部 分 既 提 供 了 直接 访问 组 件 实例 的 方 
法 ， 也 握 供 了 目 定 义 事件 机 制 ， 通 过 广播 、 涛 
发 、 监 昕 等 形式 进行 中 组 件 的 芳 数 调用 。 


6.3.1 直接 访问 


在 组 件 实 例 中 ，Vue.js 提 供 了 以 下 三 个 属性 对 
其 父子 组 件 及 根 实例 进行 直接 访问 。 


1) $parent: 父 组 件 实例 。 
2) $children: 包含 所 有 子 组 件 实例 。 
3) $root: 组 件 所 在 的 根 实例 。 


这 二 个 属性 都 挂 载 在 组 件 的 this 上 ， 虽 然 
ee 但 我 们 并 不 提倡 
这 么 操作 。 导致 父 组 件 和 子 组 件 紧 密 耦 合 ， 
三 有 所 以 建议 尽量 使 用 props 在 
组 件 间 传递 数据 。 


6.3.2 ”上 自 定 义 事件 监听 


在 Vue 实 例 中 ， 系 统 提供 了 一 套 目 定义 事件 接 
口 ， 用 于 组 件 间 通信 ， 方 便 修 改组 件 状态 。 类 似 
于 在 和 jQuery， 我 们 给 DOM 元 素 绑 定 一 个 非 原生 的 
事件 ， 例 如 : $('#ele").on('custom', fn)， 然 后 通过 手 
2- 用 $(#ele").trigger('custom") 方 式 来 进行 事件 的 


那 在 Vuejs 中 ， 我 们 先 来 看 下 如 何在 实例 中 监 
听 自 定义 事件 。 


1 . events 选 项 


我 们 可 以 在 初始 化 实例 或 注册 子 组 件 的 时 
候 ， 直 接 传 给 选项 events 一 个 对 象 ， 例 如 : 


var vm = new Vuel({ 


: function(msg) { 
this.todo.push(msg); 


2 ，$on 方 法 


我 们 也 可 以 在 某 些 特定 情况 或 方法 内 来 用 $on 
方法 来 监听 事件 ， 例 如 : 


var vm = new Vue(L 


el : '#app', 
data : { 

todo : [] 
}, 


methods : { 


begin : function() { 
this.$on('add', function(msg) { 
this.todo.push(msg); 
}); 
} 


} 
}); 


6.3.3” 自 定义 事件 触发 机 制 


设置 完成 事件 监听 后 ， 下 面 来 看 下 Vue.js 的 触 
发 机 制 。 


1. $emit 


在 实例 本 号 上 触发 事件 。 例 如 : 


events : { 
'add' : function(msg) { 
this.todo.push(msg); 


} 
methods: { 
onClick : function() { 


this.$emit('add', 'there is a message');// 即 可 
触发 events 中 的 add 函 数 
} 


2. $dispatch 

派发 事件 ， 事 件 沿 看 父 链 冒 泡 ， 并 且 在 第 一 
次 触发 回调 之 后 目 动 俘 止 冒 抱 ， 除 非 触 发 函数 明 
确 返 回 true， 才 会 继续 同上 骨 泡 。 


父 组 件 : 


events : { 
'add' : function(msg) { 


this.todo.push(msg); 
// return true 明确 返回 true 后 ， 事 件 会 继续 向 上 冒 泡 
} 
} 


子 组 件 : 


methods: { 


toParent : function() { 
this.$dispatch('add', "message from child'); 
} 
} 


调用 子 组 件 中 的 toParent() 画 数 ， 即 可 同上 时 
泡 ， 触 发 父 组 件 中 定义 好 的 add 事 件 。 


3. $broadcast 


a 三 播 事 件 ， 事 件 会 同 下 传递 给 所 有 的 后 代 。 
列 如 : 


父 组 件 : 


methods: { 
tochild : function() { 
this.$dispatch('msg', 'message from parent'); 


子 组 件 : 


events : { 
'msg' : function(msg) { 
alert(msg); 


下 面 ， 我 们 可 以 通过 这 个 完整 的 例子 来 验证 
这 三 种 触发 机 制 : 


// 模板 
<div id="app"> 
<input type="text" v-model="content"> 
<button @click="addTodo"> 添 加 </button> 
<button @click="broadcast"> 广 播 </button> 
<child-todo name="one"></child-todo> 
<child-todo name="two"></child-todo> 
<ul> 
<1i v-for="value in todo"> 
{{ value }} 
</1i> 
</Uul> 
</div> 
// 子 组 件 
Vue.component('child-todo', { 
props : ['name'], 
data : function() { 


return { 


content : "' 
} 
}, 
template : '<div>\ 
child {{name}} 和 
<input type="text" v-model="content"/> \ 
<button @click="add"> 添 加 </button> \ 
</div>", 
methods : { 


add : function() { 
// 将 事件 同上 派发 ， 这 样 既 修改 了 父 组 件 中 的 todo 属 性 ， 
又 不 直接 访问 父 组 件 
this.$dispatch( add ， 'Child ' + this.name 


+ ': "+ this.content); 
this,.content = ''， 
} 
ys 
events  : 


t 
// 用 于 接收 父 组 件 的 广播 
'to-child' : function(msg) { 
this.$dispatch('add', 'Child ' + this.name 
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} 
} 
}); 
// 根 实例 


var vm = new Vuel(t{ 
el : '#app', 
data : { 
todo : [], 
content : 
}, 
methods : { 
addTodo : function() { 


// 触发 自己 实例 中 的 事件 


this.$emit('add', Parent: ' + 
this.content); 
this.content = ''， 
}, 


broadcast : function() { 
// 将 事件 广播 ， 使 两 个 子 组 件 实 例 都 触发 Lo-child 事 件 
this.$broadcast('to-child', this.content); 
this.content = ''， 


'add' : function(msg) { 
this.todo.push(msg); 


} 
}); 


页 面 结 来 将 展示 为 : 
Child one i 
Child two 


在 根 实例 的 input 中 输入 内 容 “Hello”， 点 击 “ 瀛 
加 ”， 即 会 在 绑 定 v-for 指 令 的 1i 标 等 中 输 
出 “Parent: Hello”; 或 点 击 “ 三 播 ?， 则 会 输 
出 “Child one: hello” 和 “Child two: hello” 两 条 数据 ， 


本 质 瓯 是 广播 了 事件 to-child， 两 个 子 组 件 接 有 党 后 
触发 了 监 昕 函数 ， 将 内 容 和 组 件 name 参 数 添 加 a 到 
父 组 件 的 todo 数 组 中 。 


6.3.4” 子 组 件 索 引 


虽然 我 们 不 建议 组 件 间 直接 访问 各 目的 实 
例 ， 但 有 时 也 不 可 避免 ，Vue.js 也 提供 了 直接 访问 
于 组 件 的 方式 。 除 了 之 前 的 this.children 外 ， 还 可 
以 给 子 组件 绑 定 一 个 v-ref 指 令 ， 指 定 一 个 索引 
ID， 例 如 : 


<child-todo v-ref:first></child-todo> 


这 样 ， 在 父 组 件 中 就 可 以 通过 this.$refs.first 的 
方式 获取 子 组 件 实例 。 


另外 ， 如 有 果 v-ref 作 用 在 v-for 绑 定 的 元 素 上 ， 
例如 : <li v-for="item'" v-ref:items> </li>， 父 组 件 
获取 的 this.$refs.items 为 一 个 数组 ， 包 含 相应 的 子 
组 件 实 例 。 


6.4 内容 分 发 


在 实际 的 一 些 情况 中 ， 子 组 件 往往 并 不 知道 
需要 展示 的 内 容 ， 而 只 提供 基础 的 交互 功能 ， 内 
容 及 事件 由 父 组 件 来 提供 。 例 如 我 们 经 常会 使 用 
的 Bootstrap 的 模 态 框 (Modal) 插件 ， 如 图 6-1 所 
不 ° 


Modal title 


One fine body... 


图 6-1 


我 们 在 调用 时 只 希望 使 用 Modal 的 浮 层 属 性 ， 
以 及 显示 /关闭 浮 层 等 控制 久 数 ， 但 内 容 本 号 则 由 
父 组 件 来 决定 。 对 此 Vue.js 提 供 了 一 种 混合 父 组 件 
内 容 与 子 组 件 目 己 模板 的 方式 ， 这 种 方式 称 之 为 
内 容 分 发 。Vue.js 参 照 了 当前 web component 规 学 
理 稿 ， 使 用 <slot> 元 素 为 原始 内 容 的 捅 槽 。 首 匈 解 
释 下 内 容 分 发 的 一 些 基 础 用 法 和 概念 ， 最 后 来 说 
明 下 Modal 这 个 实际 案例 。 


6.4.1 ”基础 用 法 


0 于 来 说 明 内 容 分 发 的 基础 
法 : 


<div id="app"> 
// 使 用 包含 slot 标 签 属性 的 子 组 件 
<my-slot> 
// 属性 slot 值 需要 与 子 组 件 中 slot 的 name 值 匹配 
<p slot="title">{{ title }}</p> 
<div slot="content">{{ content }}</div> 
</my-slot> 
</div> 
// 注册 my-slot 组 件 ， 包 含 <slot> 标签 ， 且 设 定 唯一 标识 name 
Vue.component('my-slot', { 
template : '<div>\ 
<div class="title"> \ 
<slot name="title"></slot> \ 
</div> \ 
<div class="content"> \ 
<slot name="content"></slot> \ 


var vm = new Vuel(t{ 
el : '#app', 


title : 'This is a title'， 
content : 'This is the content' 
} 
小 
// 最 后 输出 结 采 
<div> 
<div class="title"> 


<p slot="title">This is a title</p> 
</div> 
<div class="content"> 
<div slot="content">This is the content</div> 
</div> 
</div> 


从 上 述 例 子 中 可 以 看 出 ， 父 组 件 中 的 内 容 代 
营 了 了 于 组 件 中 的 slot 标 金 ， 使 得 我 们 可 以 在 不 同 地 
方 使 用 子 组 件 的 结构 而 且 填 充 不 同 的 父 组 件 内 
容 ， 从 而 提升 组 件 的 复 用 性 。 


6.4.2 ”编译 作用 域 


在 上 述 例子 中 ， 我 们 在 父 组 件 中 调用 <my- 
slot> 组 件 ， 并 在 <p slot=“title”>{{f title }}<p> 中 绑 
定数 据 tittle， 从 结果 得 知 此 时 绑 定 的 是 父 组 件 的 数 
据 。 也 束 是 说 在 这 种 <my-slot>{{ data }}</my-slot> 
模板 情况 下 ， 父 组 件 模 板 的 内 容 在 父 组 件 作用 域 
内 编译 ， 了 于 组 件 模 板 的 内 容 在 子 组 件 作 用 域内 编 


译 。 


以 下 这 样 的 父 组 件 模 板 例 于 束 是 无 效 的 : 


<my-scope-slot> 
<p slot="title">{{ childData }}</p> 
</my-scope-slot> 
Vue.component('my-scope-slot', { 
template : '<div>\ 
<p>{{ "child: " + childData }}</p> \ 
<slot name="title"></slot> 和 
</div>", 
data() { 
return { 
childData : 'child scope' 


} 


输出 结果 : 


<div> 
<p>child: child scope</p> 
<p slot="title"></p> 
</div> 


6.4.3 ”默认 slot 


<slot> 标 签 人 多 许 有 一 个 匿名 slot， 不 需要 有 
name 值 ， 作 为 找 不 到 匹配 的 内 容 片 段 的 回 退 插 
槽 ， 如 果 没 有 默认 的 slot， 这 些 找 不 到 匹配 的 内 容 
片段 将 被 名 上 略 。 下 面 修改 一 下 上 面 的 例子 : 


<anonymous-slot> 
// 去 除 sSlot 属 性 
<div id="content">{{ content }}</div> 
<p slot="title">{{ title }}</p> 
</anonymous-slot> 
// 匿名 slot 
Vue.component('anonymous-slot', { 
template : '<div>\ 
<div class="title"> \ 
<slot name="title"></slot> \ 
</div> \ 
<div class="content"> \ 
<slot></slot> \ 
</div> \ 
</div>', 


}); 


此 时 id 为 content 的 元 杂 即 为 找 不 到 匹配 的 内 容 
上 请 段 ， 由 于 我 们 在 anonymous-slot 组 件 中 设置 了 匿 


名 slot， 所 以 Vue.js 会 把 该 元 到 搬入 到 slot 中 ， 最 后 
输出 结果 : 


<div> 
<div class="title"> 
<p slot="title">This is a title</p> 
</div> 
<div class="content"> 
<div>This is the content</div> 


</div> 
</div> 


如 果 将 子 组 件 中 的 匿名 <slot></slot> 巷 换 成 
<slot name="content"></slot>， 则 #content 元 叉 束 和 直 


接 被 忽略 了 ， 输 出 结 来 为 : 


<div> 
<div class="title"> 
<p slot="title">This is a title</p> 
</div> 
<div class="content"> 
</div> 
</div> 
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6.4.4 slot 属性 相同 


在 父 组 件 中 ， 我 们 也 可 以 定义 多 个 相同 slot 属 
性 的 DOM 标 人 钨 ， 这 样 会 依次 插入 到 对 应 的 子 组 件 
的 slot 标 侈 中 ， 以 见 第 太后 的 方式 呈现 ， 我 们 可 以 
将 上 例 中 父 组 件 的 实例 模板 改 成 : 


<my-slot> 
<p slot="title">{{ title + '1'}}</p> 
<p slot="title">{{ title + '2'}}</p> 
<div slot="content">{{ content }}</div> 
</my-slot> 
// 输出 结果 
<div> 
<div class="title"> 
<p slot="title">This is a title1i</p> 
<p slot="title">This is a title2</p> 
</div> 
<div class="content"> 
<div slot="content">This is the content</div> 
</div> 
</div> 


6.4.5 “Modal 实 例 


本 小 节 我 们 会 通过 Modal 案 例 来 演示 内 容 分 发 
的 实际 使 用 场景 。 


首先 注册 Modal 子 组 件 : 


// Modal 组 件 模 板 
<script id="modalTpl" type="x-template"> 
<div role="dialog"> 
<div role="document" v-bind:style="{width: 
optionalwidth}"> 
<div class="modal-content"> 
<slot name="modal-header"> 
<div class="modal-header"> 
<button type="button" class="close" 
@click="close"> <span>&times;</span></button> 
<h4 class="modal-title" > 
<slot name="title"> 
{{title}} 
</slot> 
</h4> 
</div> 
</slot> 
<slot name="modal-body"> 
<div class="modal-body"></div> 
</slot> 
<slot name="modal-footer"> 
<div class="modal-footer"> 
<button type="button" class="btn btn- 
default" @click="close"> 取 消 </button> 
<button type="button" class="btn btn- 
primary"” @click="callback"> 确 定 </button> 


</div> 
</slot> 
</div> 
</div> 
</div> 
</script> 
// 注册 Modal 组 件 
Vue.component('modal', { 
template : '#modalTpl',， // 获取 模板 中 的 HTML 结 构 
props : 
title: { // Modal 标题 
type: String, 
default: "'" 


[A 
show: { // 控制 Modal 是 否 显 示 
required: true, 
type: Boolean, 
twoway: true 


}, 
width: { // Modal 宽度 
default: null 


}, 
callback: { // 点 击 确定 按钮 的 回调 函数 
type: Function, 
default : function() {} 
} 
}, 
computed: { // 计算 属性 
optionalwidth () { // 处 理 props 的 width 属性 
if (this.width === null) { 
return null; 
} else if (Number.isInteger(this.width)) { 
return this.width + 'px'; 


return this.width,; 
} 
}, 


watch: 1{ 
show (val) { // show 值 变化 时 调用 该 函数 
var el = this.$el; 
if (val) { 
el.style.display = 'block'; //show 值 为 true 
时 ， 显 示 根 元 素 
} else { 
el.style.display = 'none'; //show 值 为 false 


时 ， 隐 减 根 元 素 


} 
} 
}, 
methods: { 
close () { 
this.,show = false; 
} 
} 
}) 
// 父 组 件 调用 方式 
// 需要 引入 
http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstr 
ap .css 样式 


// 父 组 件 中 使 用 modal 组 件 
<div id="app"> 
<button @click="show = true">open</button> 
<modal :show.sync="show" width="300px" 
‘callback="close"> 
<!- 蔡 换 modal 组 件 中 的 <slot name="modal-header"> 
</S1ot> 搬 槽 --> 
<div slot="modal-header" class="modal- 
header">Title</div> 
<!-- 蔡 换 modal 组 件 中 的 <slot name="modal-body"> 
</slot> 插 模 --> 
<div slot="modal-body" class="modal-body"> 
<div class="inner"> 
Content 
</div> 


</div> 
<1! 一 由 于 父 组 件 中 没有 设 定 slot="modal-footer" 的 元 素 ， 
所 以 使 用 子 组 件 中 的 默认 HTML 结 构 - -> 


</modal> 
</div> 
var vm = new Vuel(t{ 
el : '#app', 
data : { 
show : false 
}, 
methods : { 


close : function() { 
alert('save'); 
this.,show = false; 


} 
} 
}); 


open 


Title 


Content 


最 终 得 到 一 个 被 button 控 制 打 开 的 Modal 模 态 
棋 ， 并 且 内 容 由 父 组 件 定 义 ， 并 皖 供 模仿 低 的 禄 
度 及 确定 后 的 回调 函数 。 


6.5 ”动态 组 件 


Vue.js 支 持 动 态 组 件 ， 即 多 个 组 件 可 以 使 用 同 

一 挂 载 态 ， 根 据 条 件 来 切换 不 同 的 组 件 。 使 用 你 

留 标 丛 <component>， 通 过 绑 定 到 is 属性 的 人 来 判 

叶 挂 载 哪 个 组 件 。 这 种 场景 往往 运用 在 路 由 控制 

9 ° 本 小 廊 完 介绍 下 动态 组 件 的 基础 
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6.5.1 ”基础 用 法 


我 们 通过 一 个 切换 页 面 的 例子 来 说 明 一 下 动 
仿 组 件 的 基础 用 法 : 


<div id="app"> 


// 相当 于 一 级 导航 栏 ， 点 击 可 切换 页 面 


<ul> 

<1i @click="currentView = 'home'">Home</1i> 

<1i @click="currentView = 'list'">List</1i> 

<1i @click="currentView = 'detail'">Detail</1i> 
</ul> 


<component :is="currentView"></component> 
</div> 
var vm = new Vuel(t{ 
el : '#app', 
data: { 
currentView: 'home' 


[A 
components: { 
home: { 


template : '<div>Home</div>' 


}, 
list: { 
template : '<div>List</div>' 
}, 
detail: { 
template : '<div>Detail</div>' 


component 标 和 俭 上 is 属性 决定 了 当前 采用 的 子 
组 件 ，:is 是 v-bind:is 的 缩写 ， 绑 定 了 父 组 件 中 data 
的 currentView 属 性 。 顶 部 的 ul 则 起 到 导航 的 作用 ， 
点 击 即 可 修改 currentView 值 ， 也 束 修 改 component 
标签 中 使 用 的 子 组 件 类 型 ， 需 要 注意 的 事 ， 
currentView 的 值 需 要 和 父 组 件 实例 中 的 components 
属性 的 key 相 对 应 。 


6.5.2 keep-alive 


component 标 签 返 受 keep-alive 属 性 ， 可 以 将 切 
换 出 去 的 组 件 保 留 在 内 存 中 ， 避 人 免 重 刹 泻 染 。 我 
们 将 上 述 例 子 中 的 component 标 签 修改 为 : 


<Component :is="currentView" keep-alive> 
</component> 


并 有 日 将 home 组 件 修改 为 : 


home: { 
template : '<div> \ 
<p>Home</p> \ 
<Uul> \ 
<1i v-for="item in items">{{ item }}</1i> 


</ul> \ 
</div>", 
data : function() { 
return { 
items : [] 


} 


}, 
ready : function() { 


console.log('fetch data' ); 
this.items = [1, 2, 3, 4, 5]; 
} 
}, 


在 keep-alive 属 性 下 ， 可 以 在 home 和 list 之 间 切 
换 currentView，home 组 件 的 ready 函 数 只 运行 一 
次 ， 可 以 看 到 控制 人 台 只 输出 了 一 次 “fetch data”。 而 
将 keep-alive 属 性 去 除 后 ， 再 次 在 home 和 list 组 件 间 
切换 ， 会 发 现 每 点 击 人 天 home， 控 制 台 都 会 输出 一 
次 “fetch data”。 


我 们 可 以 根据 该 特性 适当 地 进行 页 面 的 性 能 
优化 ， 如 采 每 个 组 件 在 激活 时 并 不 要 求 每 次 都 实 
时 请 求 数据 ， 那 使 用 keep-alive 可 以 避免 一 些 不 必 
要 的 重复 泻 染 ， 导 至 用户 看 到 停留 时 间 过 长 的 空 
日 页 面 。 但 如 果 每 次 激活 组 件 都 需要 问 后 端 请 求 
数据 的 话 ， 束 不 太 适 合 使 用 keep-alive 属 性 了 。 


Vue.js 2.0 中 keep-alive 属 性 被 修改 为 标签 ， 例 
如 : 


<keep-alive> 
<component v-bind:is="view"></component> 
</keep-alive> 


6.5.3 _ activate 钩子 函数 


Vue.js 给 组 件 提 供 了 activate 钓 于 函数 ， 作 用 于 
动态 组 件 切换 或 者 静态 组 件 初 始 化 的 过 程 中 。 
activate 接 受 一 个 回调 函数 做 为 参 效 ， 使 用 函数 后 
组 件 才 进行 之 后 的 浑 染 过 程 ° 我 们 将 上 壕 例 子 中 
的 home 组 件 修改 为 : 


home: { 
template : '<div> \ 
<p>Home</p> \ 
<Uul> \ 
<1li v-for="item in items">{{ item }}</1i> \ 
</ul> \ 
</div> '， 
data : function() { 
return { 
items : [] 


} 

}, 

activate : unet Tom aone,) { 
var that = this 


, // 此 处 的 setTimeout 用 于 模拟 正式 业务 中 的 aj ax 异步 请 求 数 
所 


setTimeout(function() { 
that.items = [1, 2, 3, 4, 5]; 
done( ) ; 

}, 1000), 


此 时 也 可 以 定义 两 个 component 作 为 对 比 ， 并 
设 定 其 中 一 个 属性 为 keep-alive: 


<Component :is="currentView"></component> 
<Component :is="currentView" keep-alive> 
</component> 


可 以 对 比 出 ， 再 次 激活 home 后 ， 未 使 用 keep- 
alive 的 component 会 延 玉 1s 的 时 间 才 泻 染 出 列表 。 


6.6 ”Vue.js 2.0 中 的 变化 


本 小 节 主 要 说 明 下 Vue.js 2.0 中 对 于 组 件 用 法 
及 api 的 一 些 相 关 变 化 。 


0.0.1 event 


Vue.js 2.0 中 废弃 了 event 选 项 ， 所 有 的 目 定 义 
事件 都 需要 通过 $emit, $on, $off 函数 来 进行 触发 、 
监听 和 取 靖 监听 。 另 外 ， 废 寞 了 $dispatch 和 
$broadcast 方 法 。 官 方 认 为 这 两 种 方法 主要 依赖 于 
组 件 的 树 形 结构 ， 而 当 组 件 结构 越 来 越 复 杂 后 ， 


这 种 事件 流 的 形式 将 难以 被 理 解 ， 而 且 也 并 不 能 
解决 元 种 组 件 之 间 的 通信 问题 。 所 以 官方 推 存 使 
用 集中 式 的 事件 管理 机 制 来 处 理 组 件 间 的 通信 ， 
而 不 是 依赖 于 组 件 本 里 的 结构 。 


官方 建议 可 以 直接 使 用 一 个 空 Vue 实 例 来 处 理 
向 单 的 事件 触发 机 制 : 


var bus = new Vue(); 
bus.$emit('create', { title : 'name'}); 
bus.$on('create', function(data) { 


// 进行 对 应 的 操作 


了 这样 使 用 的 话 ， 事 件 的 监听 和 触发 机 制 怠 脱 
离 了 组 件 的 结构 ， 完 全 依赖 于 bus 这 个 实例 ， 在 整 
0 
效 。 例 如 : 


<div id="app"> 
<comp-a></comp-a> 
<comp-b></comp-b> 

</div> 

var bus = new Vue(); 


var vm = new Vue({ 
el : '#app', 
components : { 
compA : { 
template : '<div> \ 
<input type="text" v-model="name" /> \ 
<button @click="create"> 添 加 </button> \\ 
</div> '， 
data : function() { 
return { 
name : "! 
} 


}, 
methods : { 


create : function() { 
bus.$emit('create', { name : this.name 
}); 
this.name = "''， 
} 
} 
}, 
compB : { 
template : '<ul> \ 
<1i v-for="item in items">{{ item.name }} 
</1i> \ 


</ul>", 
data : function() { 
return { 
Items : [] 
} 
站 


// mounted 为 Vue, js 2.0 中 新 的 生命 周期 函数 
mounted() { 
var that = this; 
bus.$on('create', function(data) { 
that.items.push(data); 


}) 


在 comp-a 组 件 中 输入 内 容 ， 点 击 供 加 * 即 可 
触发 create 事 件 。 在 兄弟 组 件 comp-b 中 则 监听 这 个 
create 事 件 ， 并 把 传 入 的 值 添 加 a 到 目 时 的 items 数 组 
中 。 此 时 的 bus 实 例 即 可 抽象 成 一 个 集中 式 的 事件 
处 理 絮 ， 供 所 有 的 组 件 使 用 。 


而 在 相对 复 录 的 场景 中 ， 则 推 存 引入 状态 管 
理 机 制 ，Vuex 吏 是 这 种 机 制 气 Vue.js 结 合 的 实现 形 
式 。 这 个 会 在 第 九 章 做 一 个 详细 的 说 明 。 


6.6.2 keep-alive 


keep-alive 不 再 是 动态 组 件 component 标 全 中 的 
属性 ， 而 成 为 了 单独 的 标签。 使 用 方式 如 下 : 


<keep-alive> 
<component :is="currentView"></view> 
</keep-alive> 


keep-alive 也 可 以 不 和 component 配 合 使 用 ， 单 
独 包 诈 多 个 子 组 件 ， 只 需要 确 休 所 有 子 组 件 只 激 
活 唯 一 一 个 即 可 。 例 如 : 


<keep-alive> 
<comp-a v-if="active"></comp-a> 
<comp-b v-else></comp-b> 
</keep-alive> 


6.6.3 slot 


slot 不 再 支持 多 个 相同 plot 属 性 的 DOM 插 入 到 
对 应 的 slot 标 签 中 ， 一 个 slot 只 被 使 用 一 次 。 下 面 
以 6.4.4 廊 中 的 例子 来 说 明 : 


// 父 组 件 中 定义 了 多 个 slot="" 

<div slot="modal-header" class="modal- 
header">Title1i</div> 

<div slot="modal-header" class="modal- 
header">Title2</div> 

// 子 组 件 


<slot name="modal-header"></slot> 


在 Vue.js 1.0 中 ， 父 组 件 中 的 两 个 modal-header 
都 会 添加 人 到 slot 中 ， 而 在 Vue.js 2.0 中 ， 第 二 个 
modal-header 会 被 包 略 。 


万 外 ，slot 标 等 不 再 你 存 目 吴 的 属性 及 样式 ， 
均 由 父 元 素 或 极 插 入 的 元 素 捉 供 样式 和 属性 。 


6.6.4 refs 
了 于 组 件 索 引 v-ref 的 声明 方式 产生 了 变化 ， 不 


再 是 一 个 指令 了 ， 而 警 换 成 一 个 于 组 件 的 一 个 每 
殊 属性 ， 例 如 


<Comp ref="first"></comp> //Vue.js 1.0 中 为 <comp 
v-ref="first"></first> 


| 


调用 方式 并 没有 发 生变 化 ， 仍 采用 vm.$refs 的 
方 陈 直接 访问 子 组 件 实例 。 


第 7 章 ”Vue.js 常 用 插件 


Vue.js 本 号 只 提供 了 数据 与 视图 绑 定 及 组 件 化 

等 功能 ， 如 果 想 用 它 来 开发 一 个 完整 的 SPA 

(Single Page Application) 应 用 ， 我 们 还 需要 使 用 
到 一 些 Vue.js 的 插件 。 本 章 主 要 介绍 Vue-router 和 
Vue-resouce， 分 别 能 提供 路 由 管理 和 数据 请 求 这 
两 个 功能 。 除 此 之 外 ， 还 有 Vue-devtools， 这 十 一 
蒜 方 便 查 看 Vue.js 实 例 数据 的 chrome 搬 件 ， 这 对 我 
们 开发 和 调试 都 有 非常 大 的 帮助 。 


7.1] Vue-router 


Vue-router 是 给 Vue.js 捉 供 路 由 管理 的 插件 ， 
利用 hash 的 变化 控制 动态 组 件 的 切换 。 以 往 页 面 
则 跳 转 都 由 后 问 MVC 中 的 Controller 层 控制 ， 通 过 
<a> 标 签 的 href 或 者 直接 修改 location.href， 我 们 会 
问 服务 端 发 起 一 个 请 求 ， 服 务 端 啊 应 后 根据 所 接 
收 到 的 信息 去 获取 数据 和 指派 对 应 的 模板 ， 演 数 
成 HTML 再 迹 回 给 浏 蜗 闫 ， 解 析 成 我 们 可 见 的 页 
面 。Vue.js + Vue-router 的 组 合 将 这 一 父 逻 辑 放 在 
了 前 剖 去 执行 ， 切 换 到 对 应 的 组 件 后 再 同 后 并 请 
求 数据 ， 填 元 进 檬 板 来 ， 在 浏 贤 妖 闹 完 成 HTML 
的 洽 染 。 这 样 也 有 助 于 前 后 问 分 离 ， 前 新 不 用 依 


赖 于 后 端的 逻辑 ， 只 需要 后 并 提供 数据 接口 即 


本 章 部 分 代码 会 采用 ES6 的 写法 ， 运 行 时 需要 
使 用 Babel 进 行 编译 。 


7.1.1 引用 方式 


Vue-router 可 以 直接 引用 编译 好 的 js 文件 ， 
CDN 地 址 为 : 


https://cdn.jsdelivr.net/vue.router/0.7.10/vue- 
router .min.js 


, 在 HTML 中 直接 用 script 标 签 引 入 即 可 ， 例 
上 


<script 
src='http://cdn.jsdelivr.net/vue/1.0.26/vue.min.js 
'></script> 

<script 
src='https://cdn.jsdelivr.net/vue.router/0.7.10/vu 
e-router .min.]js'></script> 


也 可 以 采用 npm 的 方式 安装 : 


npm install vue-router 


0 


import Vue from 'vue'; 
import VueRouter from 'vue-router'; 
Vue .use(VueRouter ); 


7.1.2 ”基本 用 法 


Vvue-router 的 基本 作用 束 是 将 每 个 路 径 上 映射 到 
对 应 的 组 件 ， 并 通过 修改 路 由 进行 组 件 间 的 切 


换 。 第 规 路 径 规 则 为 在 当前 ar 路 径 后 面 加 上 
#!/path，path 即 为 设 定 的 前 端 路 由 路 径 。 例 如 : 


<div id="app"> 
<nav class="navbar navbar-inverse"> 
<div class="container"> 
<div class="collapse navbar-collapse"> 
<ul class="nav navbar-nav"> 
<] 1> 
<!-- 使 用 v-link 指令 ，path 的 值 对 应 跳 转 的 路 径 ， 
Bl#!/home --> 
<a v-link="{ path : '/home'}">Home</a> 
</1i> 
<]11i> 
<a v-link="{ path : '/list'}">List</a> 
</1i> 
</U]> 
</div> 
</div> 
</nav> 
<div class="container"> 
<! 一 路 由 切换 组 件 template 插 入 的 位 置 --> 
<router-view></router-view> 
</div> 
</div> 
js 代码 : 
// 创建 子 组 件 ， 相 当 于 路 径 对 应 的 页 面 
var Home = Vue.extend({ 
template : '<hi>This is the home page</h1>， 


}); 


// 创建 根 组 件 
var App = Vue.extend({}) 


// 创建 路 由 器 实例 


Var router = new VueRouter() 


// 通过 路 由 器 实例 定义 路 由 规则 (需要 在 启动 应 用 前 定义 好 ) 

// 每 条 路 由 会 映射 到 一 个 组 件 。 这 个 值 可 以 是 由 Vue .extend 创 建 
的 组 件 构造 函数 (如 Home) 

i (如 '/1list' 中 component 对 应 
J 值 ) 


router.map(t{ 


'/home': { 
component: Home 

}, 

'/list': { 


component : { 
template: '<h1i>This is the List page</h1>' 
} 
} 
}) 


// 路 由 器 实例 会 创建 一 个 yue 实例 ， 并 且 挂 载 到 第 二 个 参数 元 素 选 
择 器 匹配 的 DOM 上 
router.start(App, '#app') 


最 终结 来 如 下 : 


This is the home page 


7.1.3 ” 航 套 路 由 


一 般 应 用 中 的 路 由 方式 不 会 像 上 述 例 和子 那么 
人 简单， 往往 会 出 现 二 级 导航 这 种 情况 。 这 时 就 需 
要 使 用 舱 套 路 由 这 种 写法 。 我 们 给 上 述 例 和 子 添 加 
一 个 Biz 组 件 ， 包 含 一 个 骸 仅 的 router-view， 修 改 
如 下 : 


var Biz = Vue.extend({ 
template : '<div> \ 
<h1i>This is the some business channel</h1i> \ 
<div class="container"> \ 
<ul class="nav navbar-nav"> \ 
<1i> 和 
<a Vv-link="{ path : 
\'/biz/list\'}">List</a> \ 
</1i> \ 
<1i> 和 
<a Vv-link="{ path : 


\'/biz/detail\'}">Detail</a> \ 
</1i> \ 
</U]> AN 
</div> \ 
<router-view></router-view> \ 
</div>' 


> 


路 由 配置 修改 如 下 : 


router .map(1{ 
'/home': { 
component: Home 


component : Biz, 
subRoutes : { 
'/list' : { 
component : { 
template : '<h2>This is the business 
list page</h2>" 


}, 


'/detail' : { 
component : { 
template : '<h2>This is the business 
detail page</h2>' 


点 击 Biz 中 的 List 和 链接，url 路 由 即 为 
#!/biz/list， 页 和 耐 显 示 如 下 : 


Home Business 


This is the some business channel 


List Detail 


This is the business list page 


点 击 List 和 Detail 妈 可 在 #1/biz/list 和 和 #!/biz/detail 
之 间 切 换 ， 而 顶部 的 This is the some business 
channel 部 分 ， 即 Biz 组 件 中 非 <router-view> 部 分 则 
保持 不 变 。 


7.1.4 ”路 由 匹配 


Vue-router 在 设置 路 由 规则 的 上 时候， 支持 以 冒 
和 号 开头 的 动态 厂 段 。 例 如 在 设计 列表 分 页 的 情况 
下 ， 我 们 往往 会 在 unl 中 融入 列表 的 页 人 码 ， 路 由 规 
则 吏 可 以 这 么 设计 : 


router .map(1{ 
'/list/:page': { 
component :; { 
template: '<h1i>This is the No.{t{ 
$route.params.page }} page</h1>' 


} 
}) 


例如 /isV1，VlisVy2 〈 单 就 (list 路 径 并 不 会 匹 
配 ) 这 样 的 路 径 名 就 会 匹配 到 对 应 的 组 件 中 ， 并 
在 组 件 中 通过 路 由 对 象 (this.$route) 的 方式 获 
取 :page 具 体 的 值 (具体 的 方法 会 在 第 7.1.6 小 市 路 
由 对 和 象 中 解释 ) 


， 一条 路 遇 规 则 中 支持 包含 多 个 动态 片 肛 全 
由: 


router .map(1{ 
'/list/:page/:pageSize': { 
component :; { 
template: '<h1i>This is the No.{t{ 
$route.params.page }} page, {1{ 
$route.params.pageSize }} per page</h1>' 


}) 


除了 以 冒号 :开头 的 动态 厂 段 :page 外 ，Vue- 
router 还 提供 了 以 * 号 开头 的 全 匹配 片段 。 全 匹配 
片段 会 包含 所 有 符合 的 路 径 ， 而 且 不 以 "为 间隔 。 
例如 在 路 由 /list/:page 中 ， 规 则 能 匹配 /list/1,list/2 路 
径 ， 但 无 法 匹配 /isV110 这 样 的 路 径 。 而 /list*page 
则 可 以 匹配 /list1, 以 及 /isVyLl10 这 样 的 路 径 ， 不 会 
因为 "而 中 断 匹 配 。page 值 也 就 成 为 整个 匹配 到 的 
字符 串 ， 即 1 或 /10。 


7.1.5 ”具名 路 由 


在 设置 路 由 规则 时 ， 我 们 可 以 给 路 径 名 设置 
一 个 别名 ， 方 便 进 行路 由 跳 转 ， 而 不 需要 去 记 住 
过 长 的 全 路 径 。 例 如 ; 


router .map(1{ 
'/list/:page': { 
name: ']ist' 
component :; { 
template: '<hi>This is the No.{t{ 
$route.params.page }} page</h1>'" 
} 


} 
}) 


我 们 就 可 以 使 用 v-link 指 令 链 接 到 该 路 径 


<a VvV-link="{ name: 'list', params: { page : 1 
}}">List</a> 


7.1.6 ”路 由 对 象 

在 使 用 Vue-router 局 动 应 用 时 ， 每 个 匹配 的 组 
件 实 例 中 都 会 被 注入 router 的 对 象 ， 称 之 为 路 由 对 
象 。 在 组 件 内 部 可 以 通过 this.$route 的 方式 进行 调 
用 o 

路 由 对 象 总 共 包 售 了 以 下 几 个 属性 : 
1. $route.path 


类 型 为 字符 串 ， 为 当前 路 由 的 绝对 路 径 ， 
uD/list/1 。 


2. $route.params 


类 型 为 对 象 。 包 含 路 由 中 动态 片段 和 全 人 匹配 
片段 的 键 值 对 。 如 上 壕 例 子 中 的 [ist:page 路 径 ， 


台 可 以 通过 this.$route.params.page 的 方式 来 获取 路 
径 上 page 的 值 。 


3. $route.query 


类 型 为 对 象 。 包 含 路 由 中 查询 参数 的 键 值 
对 。 例 如 /list/1?sort=createTime, 通过 
this.$route.query.sort 即 可 得 到 createTime。 


4. $route.router 


即 路 由 实例 ， 可 以 通过 调用 其 go，replace 方 
法 进行 跳 转 。 我 们 在 组 件 实例 中 也 可 以 直接 调用 
this.$router 来 访问 路 由 实例 。router 具 体 的 属性 和 
api 方 法 将 在 7.1.10 路 由 实例 中 进行 说 明 。 


5. $route.matched 


类 型 为 数组 。 包 侣 当前 匹配 的 路 径 中 所 有 片 
段 对 应 的 配置 参数 对 象 。 例 如 在 由 isV1?sort= 
createTime 路 径 中 ，$route.matched 值 如 下 : 


Y [0bject， ryPa 
v0: Object 
v handler: Obje 
pb componen function VueComponent (options) 
futLLPath: "/list/*pag 
path: "/list/*page" 
0bject 
isDynamic: true 
v params: Object 
page: "1" 
: 0bject 
: Object 
Length: 1 
v queryParams: Object 
sort: "createTime”" 
: Object 
: Object 


6. $route.name 


关 型 为 字符 串 ， 即 为 当前 路 由 设置 的 name 属 


性 。 
7.1.7 v-link 
v-link 是 vue-router 悄 用 中 用 于 路 径 间 路 转 的 指 
其 本 质 是 调用 路 由 实例 router 本 吴 的 go 函数 进 


2 
ws 
行 跳 转 。 该 指令 接受 一 个 JavaScript 表 达 式 ， 而 且 


可 以 直接 使 用 组 件 内 绑 定 的 数据 。 
单 见 的 使 用 方式 包含 以 下 两 种 


1) 直接 使 用 字面 路 径 : 


<av-link="home">Home</a> /注意 这 里 双 
引号 里 的 home 需 要 加 上 单 引 号 ， 不 然 会 变 成 读 取 
组 件 data 属 性 中 的 home 值 。 


或 者 写成 : <a v-link="{ path : 


‘home'}">Home</a> 


2) 使 用 具名 路 径 ， 并 可 以 通过 params 或 query 
设置 路 径 中 的 动态 厂 段 或 查询 变量 : 


<a VvV-link="{ name : 'list', params: { page : 
1}}">List Page 1</a> 


此 外 ，v-link 还 包含 其 他 参数 选项 : 
1. activeClass 


失 型 为 子 符 串 如 后 当 前 路 径 包 含 v-link 中 
path 的 值 ， 该 元 系 会 目 动 添加 activeClass 值 的 类 
和 名， 默认 为 v-link-active 。 


2. exact 


类 型 为 布尔 值 。 在 判断 当前 是 否 为 活跃 路 径 
时 ，v-link 和 于 认 的 匹配 方式 是 包容 性 匹配 ， 即 如 果 
v-link 中 path 为 /list， 那 以 /list 路 径 为 开头 的 所 有 路 
径 均 为 活跃 路 径 。 而 设置 exact 为 true 后 ， 则 只 有 当 
路 径 完 全 一 致 时 才 认 定 为 活跃 路 径 ， 然 后 添加 
class 关 名 。 


3. replace 


类 型 为 布尔 值 。 奉 replace 值 设 定 为 true， 则 点 
击 链接 时 执行 的 是 router.replace0 方 法 ， 而 不 是 
0 ° 由 此 产生 的 跳 转 不 会 留 下 历史 记 


4. append 


类 型 为 布尔 值 。 若 append 值 设 定 为 tue， 则 确 
保 链 接 的 相对 路 径 添 加 到 当前 路 径 之 后 。 例 如 在 
路 任 /list 下 ， 设 置 和 链接 <a v-link="{path: '1, append : 
true}">1</a>， 扩 击 则 路 径 变 化 为 /list/1; 大 不 设置 
append:true, 路 径 变 化 为 /1。 


7.1.8 ”路 由 配置 项 


在 创建 路 由 需 实 例 的 时 候 ，Vue-router 提 供 了 
以 下 参数 可 供 我 们 配置 : 


1. hashbang 


默认 值 为 ttue， 即 只 在 hash 模 式 下 可 用 。 当 
hashbang 值 为 true 时 ， 所 有 的 路 径 会 以 扒 为 开头 。 
例 如 <a v-link="{ path : WVhome'}">Home</a>， 浏 贤 
研 路 径 即 为 http:Whostname/#!home 


2. history 


默认 值 为 false。 设 为 true 时 会 局 动 HTML5 
history 檬 式 ， 利 用 history.pushState() 和 
history.replaceState() 来 管理 浏 席 历史 记录 。 由 于 使 
用 了 history 模 式 管 理 ， 所 以 使 用 pushState 生 成 的 每 
个 url 都 需要 在 Web 服 务 器 上 有 对 应 的 啊 应 ， 否 则 
单 击 “ 剧 新 ”会 返回 404 钳 误 ， 并 且 在 本 地 开发 的 时 
修 ， 需 要 将 应 用 置 于 服务 器 环境 中 (通过 localhost 
访问 应 用 ， 而 不 是 直接 访问 文件 ) 。 


常见 的 服务 疾 nginx 可 以 修改 其 目录 下 的 
conf/nginx.conf 或 conf/vhost/*.conf 文 件 ， 添 加 如 下 
配置 ， 以 满足 pushSate 的 需求 : 


server 1{ 
listen 80 ; // 病 口 号 
server_name localhost; // 或 填写 服务 器 域名 
index index.html index,php;  ”// 默 认 访 问 文 件 
root /www // 文件 放置 路 径 


location / { 


// 这 是 一 个 正则 匹配 ， 将 所 有 该 域名 下 的 url 请 求 ， 都 返回 
SPA 应 用 的 index,htm1L， 确 保 pushState 有 响应 
rewrite 人 ^(.+)$ /index.html Last 
} 
} 


3. abstract 


默认 值 为 false。 提供 了 一 个 不 依赖 于 浏 贤 器 
的 历史 管理 工具 。 在 一 些 非 浏 宽 絮 场景 中 会 非常 
有 用 ， 例 如 electron (桌面 软件 打包 工具 ， 类 似 于 
node-webkit) 或 者 cordova (native app 打 包工 具 ， 
前 号 为 phonegap) 应 用 。 


4. root 


默认 值 为 nul， 仪 在 HTMLS5 history 模 式 下 可 
用 。 可 设置 一 个 应 用 的 根 路 径 ， 例 如 : /app。 这 样 
应 用 中 的 所 有 跳 棱 路 径 都 会 默认 加 在 这 个 根 路 谷 
之 后 ， 例 如 <a v-link=vhome'>Home</a>， 路 径 即 
变化 为 /app/home 。 


5. lnkActiveClass 


驮 认 值 为 v-link-active。 与 v-link 中 的 
activeClasss 迁 项 类 似 ， 这 里 相当 于 是 一 个 全 局 的 
设 定 。 符 合 匹 配 规 则 的 链接 即 会 加 上 
linkActiveClass 设 定 的 类 各。 


6. saveScrollPosition 


默认 值 为 false， 仪 在 HTMLS5 history 模 式 下 可 
用 。 当 用 户 点 击 后 退 按 钮 和 时， 借助 HTMLS5 history 
中 的 popstate 事 件 对 应 的 state 来 重 置 页 面 的 滚动 未 
知 。 需 要 注意 的 是 ， 当 router-view 设 置 了 场景 切换 
效 采 时 ， 该 属性 不 一 定 能 生效。 


7. transitionOnLoad 


驮 认 值 为 false。 在 router-view 中 组 件 初次 加 我 
时 是 人 否 使 用 过 小 效 采 。 默认 情况 下 ， 组 件 在 初次 
加 我 时 会 二 接 演 名， 不 使 用 过 滤 歼 果 。 


8. SuppressIransitionError 


默认 值 为 false。 设 定 为 true 后 ， 将 忽略 场景 切 
换 钧 子 范 数 中 发 生 的 异常 。 


7.1.9 route 钩子 函数 


在 使 用 Vue-router 的 应 用 中 ， 每 个 路 由 匹配 到 
的 组 件 中 会 多 出 一 个 route 选 项 。 在 这 个 选项 中 我 
们 可 以 使 用 路 由 切换 的 钩子 函数 来 进行 一 定 的 业 
务 逻 恰 控 作 。 以 下 面 代码 为 例 ， 介 绍 这 些 钓 子 函 
数 的 运行 机 制 和 触发 时 机 。 


var List = Vue.extend({ 
template : '<h1i>This is the No.{{ 
$route.params.page }} page</hi>", 
route : { 
data : function(transition) { 
console.log('data' ); 
transition.next(); 
}, 
activate : function(transition) { 
console.1log('activate' ); 
transition.next(); 


[A 

deactivate: function(transition) { 
console.1log(deactivate); 
transition.next(); 

}, 

canActivate : function(transition) { 
console.1log('canActivate' ) ; 
transition.next(); 

}, 

canDeactivate : function(transition) { 
console.1log('canDeactivate' ); 
transition.next(); 


[A 
canReuse : function(transition) { 
console.1log('canReuse' ) ; 
return true; 


} 


由 上 面 这 个 例子 可 以 看 出 ，route 提 供 了 6 个 钓 
于 畏 效 ， 分 别 如 下 。 


canActivate(): 在 组 件 创 建 之 前 被 调用 ， 众 证 
组 件 是 否 可 修 创 建 。 


activate0): 在 组 件 创建 且 将 要 加 载 时 人 航 调 用 。 


data0): 在 activate 之 后 被 调用 ， 用 于 加 载 和 设置 
当前 组 件 的 数据 。 


canDeactivate(): 在 组 件 被 移出 前 被 调 用 ， 验 证 
和 是否 可 被 移 出 。 

deactivate(): 在 组 件 移出 时 调用 。 

canReuse(): 决 定 组 件 是 否 可 侯 重 用 。 这 种 场景 
通常 发 生 在 /list/1 切 换 到 /list/2 时 ， 如 果 canReuse 返 


回 值 为 tue， 则 组 件 在 切换 后 会 略 过 canActivate 和 
activate 两 个 阶段 ， 直 接 调 用 data 钧 子 函 数 。 和 大 


canReuse 返 回 值 为 false， 则 需 完整 经 历 激 活 的 三 个 
钧 子 国 数 。 


我 们 可 以 利用 上 文中 的 List 组 件 设 置 一 个 路 由 
规则 : 


router.map(t 
'/home': { 
component: 
template : '<h1i>This is the home 
page</h1>", 
} 


}, 
'/list/:page': { 


component : List 


} 
}) 


在 home 和 list 之 间 切 换 ， 我 们 可 以 看 到 控制 台 
输出 结果 如 下 : 


在 /list/1 与 /list/2 之 间 切 换 ， 结 果 如 下 : 


activate 5 .html:58 


在 每 个 钩子 函数 中 ， 都 挝 党 一 个 transition 对 象 
作为 参数 ， 我 们 称 之 为 切换 对 象 。 主 要 包含 以 下 
属性 和 方法 。 


transition.to: 将 要 切换 到 路 径 的 路 由 对 和 象 (路 
由 对 象 详 见 第 7.1.6 小 节 ) 。 


transition.from: 当前 路 径 的 路 由 对 象 。 


transition.next(): 可 以 通过 调用 该 方法 使 切换 
过 程 进 入 下 一 阶段 ， 这 样 也 葡文 持 了 在 钧 子 函 数 
内 部 使 用 异步 方法 的 情况 。 比 如 进入 某 个 路 径 前 
我 们 需要 核验 用 户 是 否 具 有 某 种 权限 ， 而 这 一 版 
需要 和 后 六 前 进行 数据 交互 来 进行 验证 。 我 们 | 内 寺 NT 
要 在 异步 时 回调 函数 中 执行 ransition.nextO 即 可 确 
体 在 获取 到 效 据 后 才 执行 切换 过 程 的 下 一 阶段 。 


transition.abort([reason]): 调用 该 方法 可 以 终止 
或 者 拒绝 此 次 切换 。 需 要 注意 的 是 ， 在 activate 和 
deactivate 中 调用 该 方法 时 并 不 会 把 应 用 退 到 前 一 


个 路 由 状态 ， 只 有 在 canActivate 和 canDeactivate 内 
调用 才 会 回 退 。 


transition.redirect(path): 取消 当前 切换 并 重 定 
回 刘 另 一 个 路 由 。 人 参数 接受 字符 串 或 者 路 由 对 
象 ， 并 且 如 果 不 设 定 新 的 params 和 query 的 话 ， 会 
保留 原始 transition.to 的 params 和 query 。 


万 外 ， 这 些 钩子 国 效 在 切换 过 程 中 也 起 到 了 
不 同 的 作用 ， 我 们 分 类 说 明 如 下 。 


activate/deactivate: 返回 值 可 为 Promise 对 和 象 。 
ES6 提 供 了 原生 的 Promise 对 象 ， 可 以 通过 直接 返 
回 Promise.resolve(true)/Promise.reject([reason]) 来 欣 
制 是 人 否 进行 切换 的 下 一 步 ， 或 者 返回 retum new 
Promise(function (resolve, reject) 
{resolve(true)/reject([reason|) })° 


canActivate/canDeactivate: 返回 值 可 以 是 同 
activate/deactivate 一 样 的 Promise 对 象 ， 也 可 以 是 布 
尔 值 true/false， 和 使 用 切换 对 象 


transition.nextOytransition.abortO 歼 果 一 致 。 


data:data 钓 子 在 每 次 路 由 变动 的 时 候 都 会 被 调 
用 ， 街 别 是 当 组 件 航 重用 时 ， 往 往 跳 过 activate 只 
执行 data 芳 数 ， 如 上 壕 例 子 中 的 /lisW1 切 换 
到 /list/2。 所 以 我 们 经 常 把 加 载 动态 数据 放 在 data 


玖 子 中 执行 ， 而 且 当 组 件 从 activate 切 换 到 data 钧 子 
时 ， 会 得 到 一 个 $loadingRouteData 必 性， 默认 信 为 
true， 当 data 函 数 执行 完 进 入 下 一 步 时 将 切换 成 
false。 这 样 有 助 于 我 们 做 一 些 loading 等 竺 方面 的 
处 理 ， 避 人 免 用 户 长 时 间 得 不 到 反馈 。 与 其 他 和 钧 子 
玉 数 不 同 的 是 ， 我 们 可 以 在 调用 data 芳 数 的 
transition.next(data) 时 传 入 一 个 data 对 和 象 ， 可 以 为 组 
件 的 data 附 上 相应 的 属性 值 。 例 如 : 


route : 
data : function(transition) { 
transition.next({ page : 
transition.to.params.page }) 


} 


这 样 束 可 以 赋值 给 了 组 件 的 data.page。 男 外 ， 
还 可 以 通过 Promise 的 then 回 调 函 数 中 的 返回 值 来 
设置 ， 例 如 : 


route: { 
data : function() { 
return Promise.all([ 
// 后 端 数据 接口 ， 需 要 符合 Promise 形 式 ， 或 可 通过 vue - 


resource 插 件 实现 
// 详情 可 见 第 7.2 节 中 的 vue-resource 的 相关 说 明 
userService.getIinfo(), 
productsService.getList() 
]).then(function(reps)t 
return { 
user : reps[01], 
products : reps[1] 


7.1.10 ”路 由 实例 属性 及 方法 


在 Vue-router 局 动 的 应 用 每 个 组 件 会 被 注 
入 router 实 例 ， 可 以 在 组 件 内 通过 this. Re 
者 使 用 路 由 对 象 $route.router) 进行 访问 。 
outer 实 全 主要 包 二 了 一些 全 局 的 和 了 本 以 及 
配置 路 由 规则 ， 进 行路 由 切换 等 api。 本 攻 主 要 介 
绍 路 由 实例 的 主要 属性 和 api 方 法 。 


主要 的 公开 属性 有 以 下 两 个 。 


1. router.app 


类 型 为 组 件 实例 ， 即 为 路 由 管理 的 根 Vue 实 
例 ， 是 由 调用 router.start0 传 入 的 Vue 组 件 构 造 硕 函 
数 创建 的 。 


2. router.mode 


类 型 为 String， 值 可 以 为 HTML5, hash 或 
abstract， 表 示 当 前 路 由 所 采取 的 模式 。 


利 见 api 方 法 如 下 : 
1. router.start(App, el) 


局 动 路 由 应 用 ， 通 过 传 入 的 组 件 构 志 如 App 太 
挂 载 元 了 系 el 创建 根 组 件 。 


2. router.stop() 


停止 监 昕 popstate 和 hashchange 事 件 。 调 用 此 
方法 后 ，routerapp 没 有 被 销毁 ， 仍 可 以 使 用 
router.go(path) 进 行 跳 转 ， 也 可 以 不 使 用 参数 直接 
调用 router.start0 来 重启 路 由 。 


3. router.map() 


定义 路 由 规则 的 方法 。 包 含 component 和 
subRoutes 两 个 字段 ， 主 要 用 于 url 匹 配 的 组 件 及 骸 


套路 由 。 设 定 的 路 人 径 也 可 以 通过 :冒号 或 * 号 的 方式 
进行 匹配 ， 传 递 到 路 由 对 和 象 $route.params 中 。 


4. router.on() 


添加 一 条 顶级 的 路 由 配置 ， 用 法 和 router.map 
类 似 。 例 如 : 


router.on('/home', { 
component : 
template : '<h1i>This is the home page.</h1>' 


}); 


5. router.go(path) 


跳 转 到 一 个 狐 的 路 由 。path 可 以 是 字符 串 也 可 
以 是 包含 跳 转 信 息 的 对 象 。 奉 使 用 字符 串 时 ，url 
直接 蕉 换 成 path 的 值 。 如 果 path 不 以 /开头 ， 则 直接 
添 加 到 当前 rl 结尾 。 寿 path 为 对 象 ， 则 支持 以 下 
两 种 格式 第 一 种 为 { path : '...", append: true }， 这 
种 形式 同 直 接 使 用 字符 串 类 似 , append 选 项 为 可 
选 ， 奋 设置 成 tue， 则 确保 path 相 对 路 人 径 被 添加 到 
当前 路 径 之 后 ;第 二 种 为 { name : ……, params : {}, 


query:{}}，name 为 具名 路 径 ，params 和 query 为 可 
迁 。 画 外 ， 这 两 种 格式 都 文 持 replace 迁 项 ， 硬 

则 该 跳 转 不 产生 一 个 新 的 历史 
记 孙 。 


7.1.11 ”vue-router 2.0 的 变化 


随 着 Vue.js 升 级 到 2.0 后 ，Vue-router 了 世相 应 做 
了 了 升级。 除了 适 配 Vue.js 2.0 外 ，vue-router 2.0 对 目 
号 的 使 用 方式 ， 属 性 及 钓 子 范 数 也 做 出 了 明显 的 
改变 。 本 和 主要 从 以 下 几 个 方面 进行 说 明 。 


1. 使 用 方式 


VueRouter 的 初始 化 方式 、 路 由 规则 配置 和 局 
动 方式 均 发 生 了 变化 ， 例 如 : 


const router = new VueRouter({ 
// 路 由 规则 在 实例 化 VueRouter 的 时 候 就 直接 传 入 ， 而 不 是 调 
用 map 方 法 再 进行 传递 
routes : 
{ path : '/home', component: Home} 


| i 


}) 
// 启动 方法 也 发 生 了 变化 ，router 实 例 直接 传 入 Vue .js 实例 中 ， 
并 调用 $mount 方 法 挂 载 到 DOM 元 素 中 
const app = new Vuel(t 
router : router 


}).$mount('#app') 


敬 套 路 由 的 配置 方法 也 发 生 了 变化 ， 改 用 
children 属 性 来 进行 标记 ， 而 且 其 中 的 path 路 径 不 
需要 以 "开头 ， 人 否则 会 认为 从 根 路 径 开头 。 


const router = new VueRouter({ 
routes: [ 


path: '/biz', 
component: Biz, 
children: |[ 


path: "list', 
component: List 


了 


path: 'detail', 
component : Detail 


2， 跳 转 方式 


路 由 跳 转 的 方式 也 发 生 了 变化 ， 首 先是 废弃 
了 v-link 指 令 ， 采 用 <router-link> 标 签 来 创建 标签 
来 定义 链接 。 例 如 : 


<router-link to="/home"> 
Home 
</router-link> 


其 中 的 to 属性 和 v-link 所 能 接受 的 属性 相同 ， 
例如 { name : home', params : {....}}。 


其 次 便 用 router 实 例 方法 进行 跳 转 的 api 也 修改 
成 了 push(), 接受 的 选项 参数 基本 没有 变化 ， 例 如 : 


router.push({ name : 'home', params : {£..} }) 


router.go() 方 法 不 再 表示 跳 转 ， 而 是 接受 一 个 
整 型 参数 ， 作 用 是 在 history 记 录 中 辐 前 或 者 后 退 多 
少 步 ， 类 似 window.history.go(n)。 


router 实 例 的 api 方 法 push()、replace()、go(0 主 
要 是 模拟 window.history 下 的 pushStateO 、 
replaceState() 和 go() 的 使 用 方法 来 实现 的 ， 并 且 确 
保 router 在 不 同 模式 下 (hash、history) 表现 的 一 
致 性 


3. 钩子 函数 


Vue-router 基 本 重新 定义 了 目 身 的 钧 子 函 数 ， 
我 们 可 以 将 其 分 为 三 个 方面 : 


1) 全 局 钩子 。 在 初始 化 VueRouter 后 直接 使 
用 router 实 例 进 行 注 册 ， 包 含 beforeEach 和 afterEach 
两 个 钓 于 ， 在 每 个 路 由 切换 前 /后 调用 。 


router.beforeEach((to, from, next) => { 
// to: 即将 要 进入 的 路 由 对 和 象 
// from: 当前 正 要 离开 的 路 由 对 象 


// next : 进行 下 一 状态 ， 切 记 ， 一 定 要 在 结束 业务 逻辑 后 调用 
next 函 数 ， 不 然 钩子 函 数 就 不 会 被 resolLved 
) 


router .after(route=> { 
// route: 进入 的 路 由 对 象 
}) 


2) 单个 路 由 钩子 。 这 个 需要 在 路 由 配置 的 时 
候 直 接 定 义 ， 例 如 ; 


const router = new VueRouter({ 
routes: [ 


path: '/home', 

component: Home, 

beforeEnter: (to, from, next) => { 
// 参数 和 全 局 钧 子 peforeEach 一 致 


3) 组 件 内 钧 子 。 在 组 件 内 定义 ， 例 如 : 


const Home = { 
template: *..., 
beforeRouteEnter (to, from, next) => { 


// 参数 与 全 局 钧 子 pbeforeEach 一 臻 
// 切记 当前 钧 子 执行 时 ， 组 件 实例 还 没 被 创建 ， 所 以 不 能 调用 


组 件 实例 this 


beforeRouteLeave (to, from, next) => { 
// 路 由 切换 出 该 组 件 时 调用 ， 此 时 仍 可 以 访问 组 件 实例 
-this- 
} 
} 


4. 获取 数据 


由 于 钩子 函数 的 变化 ， 在 Vue.js 2.0 中 也 吏 不 
存在 使 用 data 钩 子 来 处 理 请 求 数据 的 逻辑 了 ， 可 以 
通过 监 昕 动态 路 由 的 变化 来 获取 数据 。 例 如 : 


const List = { 
template: '..." 
watch: { 
'$route' (to, from 


) 1{ 
// 对 路 由 变化 作出 啊 应 ， 在 此 处 理 业 务 逻 每 


而 且 在 Vue.js 2.0 中 ， 我 们 既 可 以 在 导航 完成 
之 前 获取 数据 ， 也 可 以 在 寻 航 完成 之 后 获取 数 
据 。 在 导航 完成 之 后 获取 数据 ， 是 为 了 在 狭 取 数 
据 期 间 展 示 一 个 loading 状 态 ， 我 们 可 以 在 组 件 的 
create() 钧 子 男 数 和 watch : { route :''} 中 调用 获取 
效 据 的 函数， 例如: 


export default 1{ 
data () { 
return 1{ 


created () { 
// 组 件 创 建 完 后 获取 数据 
thls,fetchDatal( ) 


// 如 末路 由 有 变化 ， 会 再 次 执行 该 方法 


'$route': 'fetchData' 
二 
methods: { 
fetchData () { 
// 调用 异步 请 求 获取 数据 


} 
} 
} 


在 导航 获取 之 前 完成 数据 ， 我 们 可 以 在 
beforeRouteEnter 钧 子 中 获取 数据 ， 并 且 只 有 当 数 
据 获 取 成 功 或 确定 有 权限 后 才 进 行 组 件 的 洽 染 ， 
否则 就 回 退 到 路 由 变化 前 的 组 件 状态 。 例 如 : 


import pageSrv from './api/pages' // 此 处 先 模拟 一 个 
获取 数据 的 模块 


export default { 
data () { 
return { 
list : [] 


beforeRouteEnter (to, from, next) { 
pageSsrv.get(to.params.page, (err, data) => 


if (err) { 
next(false); // 中 断 当 前 导航 
} else { 


next(vm => { 
vm.1ist = data; 


}) 
} 
}) 


}, 
watch: { 
$route () { 
this.1list = null; 
pageSrv.get(this.$route.params.id, (err, 
data) => { 
) { 


if (err 
// 处 理 展示 错误 的 逻辑 
} else { 
this.1list = data， 


5. 命名 视图 


Vue-router 2.0 中 人 允许 同 级 展示 多 个 视图 ， 而 
不 是 航 伍 展示 ， 可 以 通过 给 <router-view> 深 加 
name 属 性 的 方式 匹配 不 同 的 组 件 ， 如 果 没 有 设置 
name， 默 认为 default。 例 如 : 


<router-view></router-view> 
<router-view name='main'></router-view> 


const router = new VueRouter({ 
routes: [ 


path: '/', 
components: { // 要 注意 这 里 的 属性 是 
components， 而 不 是 component 
default: Nav, 
main: Main 


7.2 Vue-resource 


在 实际 开发 SPA 应 用 时 ， 一 般 和 后 端 都 会 采用 
异步 接口 进行 数据 交互 。 传 统 情况 下 ， 我 们 和 常用 
jQuery 有 的 $.ajax0 方 法 来 做 异步 请 求 。 但 Vue.js 并 不 
依赖 于 jQuery， 我 们 也 并 不 需要 为 了 异步 请 求 这 个 
功能 就 额 外 引用 jQuery。 所 以 这 里 束 和 大 家 介绍 下 
Vue.js 的 插件 Vue-resouce， 它 同样 对 异步 请 求 进行 
了 封 效 ， 方 便 我 们 同 服务 闹 进 行 数据 的 交互 。 本 
让 以 Vue-resource 1.0.2 版 本 进行 说 明 。 


7.2.1 引用 方式 


同 vue-router 类 似 ， 我 们 可 以 直接 引用 vue- 
resource 的 CDN 路 径 : 


<script 
src="https://cdn.jsdelivr.net/vue.resource/1.0.2/vV 
ue-resource.min.]js"></script> 


| 


SN install vue-resource 方 式 进行 
， 并 通过 Vue.use() 方 法 进行 调用 : 


Import VueResource from 'vue-resource'; 
Vue .use(VueResource); 


7.2.2 ”使 用 方式 


安装 好 Vue-resource 之 后 ， 在 Vue 组 件 中 ， 我 
们 整 可 以 通过 this.$http 或 者 使 用 全 局 变量 Vue.http 
发 起 异步 请 求 ， 例 如 : 


var List = Vue.extend({ 
route : { 
// vue-router 中 的 data 钧 子 芳 数 ， 
data : function(transition) { 
// 运 行 这 段 代 码 需 要 在 服务 器 环境 中 ， 即 localhost 下 ， 直 
接 访 问 文 件 运行 这 段 代码 会 抛 出 异常 
this.$http 
.get('/api/list?pageNo=" + 
transition.to.params.page); 
.then(function(rep)t 


// 成 功 回 调 函 数 
transition.next({ 

list : rep.data 
}); 

}, function(rep) { 
// 失败 回调 函数 
transition.next({ 

data : rep.data 
}); 
}); 
} 


}, 
template: '<h1i>This is the list page</h1>' 
}) 


this.$http 文 持 Promise 模 式 ， 使 用 .then 方 法 处 
理 回 调 函 数 ， 接 受 成 功 /失败 两 个 回调 函数 ， 一 般 
会 在 回调 函数 中 再 调用 transition.next0) 方 法 ， 给 组 
件 的 data 对 象 赂 值 ， 开 执行 组 件 的 下 一 步 桑 。 


7.2.3”$http 的 api 方 法 和 选项 参数 


this.$http 可 以 直接 当做 函数 来 调用 ， 我 们 以 下 
面 这 个 例 于 来 对 其 选项 进行 说 明 : 


this.$http({ 


Url : '/api/list'， ，// url 访 问 路 径 


method : '', // HTTP 请 求 方法 ， 例 如 
GET, POST, PUT, DELETE 等 
body : {}, // request 中 的 body 数 据 ， 值 可 以 为 对 


象 ，String 类 型 ， 也 可 以 是 FormData 对 象 

params :; {}, // get 方 法 时 ur1L 上 的 参数 ， 例 
如 /api/list?page=1 

headers: {}, // 可 以 设置 request 的 header 属 性 

timeout : 1500， // 请 求 超时 时 长 ， 单 位 为 毫秒 ， 如 果 设 置 
为 9 的 话 则 没有 超时 时 长 

before : function(request) {},， // 请 求 发 出 前 调用 的 
函数 ， 可 以 在 此 对 request 进 行 修改 

progress: function(event) {}， // 上 传 图 片 、 音 频 等 
文件 时 的 进度 ，event 对 象 会 包含 上 传 文件 的 总 大 小 和 已 上 传 大 小 ， 
通常 可 以 用 来 作为 进度 条 效果 

credentials : boolean， // 默认 情况 下 ， 跨 域 请 求 不 提 
共和 凭据 (cookie、HTTP 认 证 及 客户 端 SSL 证 明 等 )。 该 选项 可 以 通过 
将 XMLHttpRequest 的 withCredentials 属 性 设置 为 true， 即 可 
以 指定 某 个 请 求 强制 发 送 凭据 。 如 果 服 务 器 接收 带 赁 据 的 请 求 ， 会 用 
Access-Control-Allow-Credentials: trueHTTP 头 部 来 响应 

emulateHTTP: boolean， // 设置 为 true 后 ， 
PUT/PATCH/DELETE 请 求 将 被 修改 成 POST 请 求 ， 并 设置 header 属 
性 X-HTTP-Method-Override。 常 用 于 服务 端 不 支持 REST 写 法 时 

emulateJSON ; boolean // 设置 为 true 后 ,会 把 
request body 以 application/x-www-form-urlencoded 的 形 
式 发 送 ， 相 当 于 form 表 单 提交 。 此 时 http 中 的 header 的 content- 
type 即 为 application/x-www-form-urlencoded。 常 用 于 服务 
器 端 未 使 用 application/json 编 码 时 


此 外 ，this.$http 下 可 以 直接 调用 api 方 法 ， 相 
当 于 提供 了 一 些 快 捷 方 式 ， 例 如 : 


get(url, [options]) 
head(url, [options]) 
delete(url, [options]) 
jsonp(url, [options]) 
post(url, [body], [options]) 


put(url, [body], [options]) 
patch(url, [body], [options]) 


以 上 方法 均 可 以 采用 this. $http.get(url, options) 
或 Vue.http.get(url, options) 这 样 类 似 的 形式 进行 调 
用 。 


在 发 起 异步 请 求 后 ， 我 们 可 以 采用 
this.$http.get(.. eg 的 方式 处 理 返 回 值 。.theng) 
接受 一 个 response 的 参 效 ， 有 具体 的 属性 和 方法 如 
下 o 


url: response 的 原始 url。 


body: response 的 body 数 据 ， 可 以 为 Object， 
Blob， 或 者 String 类 型 。 


headers: response 的 Headers 对 象 。 


ok: 布尔 值 ， 当 HTTP 状 态 码 在 200 和 299 之 加 
时 为 true。 


status: response 的 HITTP 状 态 码 。 
statusText: responseHYJHTTP 状 态 接 述 。 
男 外 还 包含 以 下 三 种 api 方 法 。 


text(): Promise 类 型 ， 把 response body 解 析 成 字 


json(): Promise 类 型 ， 把 response body 解 析 成 
json 对 象 。 


blob(): Promise 类 型 ， 把 response body 解 析 成 
blob 对 象 ， 即 二 进 制 文件 ， 多 用 于 匈 斤 、 音 视频 等 
文件 处 理 。 


7.2.4 “拦截 器 


拦截 大 主要 作用 于 给 请 求 汰 加 全 局 功能 ， 例 
如 号 份 验 证 、 销 误 处 理 等 ， 在 请 求 发 送 给 服务 套 
之 前 或 服务 大 返 回 时 对 request/response 进 行 搓 稚 修 
改 ， 完 成 业务 逻辑 后 再 传递 给 下 一 步 又 。Vue- 
resource 也 提供 了 拦截 妖 的 具体 实现 方式 ， 例 如 : 


Vue.http.interceptors.push(function(request, 


{ 


// 修 改 请 求 

request .method = 'POST'; 
// 继续 进入 下 一 个 拦截 器 
next( ); 


}); 


也 可 以 对 返回 的 response 进 行 处 理 : 


Vue.http.interceptors.push(function(request, 


{ 
request .method = 'POST'; 


next(function(response) { 
// 修改 response 
response.body = '...'，; 


A 


或 者 直接 拦截 返回 response， 并 不 向 后 


next ) 


next ) 


百 听 发送 


Vue.http.interceptors.push(function(request, next) 


// body 可 自己 定义 ，request .respondwith 会 将 其 封装 成 
response， 并 赋值 到 response,body 上 
next(request.respondwith(body, { 
status: 403, 
statusText: 'Not Allowed 
})); 
}); 


7.2.5”$resource 用 法 


Vue-resource 提 供 了 一 种 与 RESTful API 风 格 所 
匹配 的 写法 ， 通 过 全 局 变量 Vue.resource 或 者 组 件 
实例 中 的 this.$resource 对 某 个 从 合 RESTful 格 式 的 
url 进 行 封 沪 ， 使 得 开发 才能 够 直接 使 用 增删 改 查 
等 基础 操作 ， 而 不 用 目 己 再 质 外 编写 接口 。 


我 们 先 大 致 说 明 下 RESTful API: 这 是 一 种 设 
计 风 格 而 不 是 标准 ， 只 是 提供 了 一 组 设计 原则 和 
约束 条 件 。 它 主要 用 于 客户 端 和 服务 器 交互 类 的 
软件 。 基 于 这 个 风格 设计 的 软件 可 以 更 简洁 ， 更 
有 层次 ， 更 易于 实现 缓存 等 机 制 。 在 这 种 风格 
中 ， 每 个 url 路 径 代 表 一 种 资源 (resource) ， 所 以 


路 径 中 不 推荐 有 动词 ， 只 能 有 名 词 ， 而 且 所 用 的 
名 词 往 往 与 数据 库 的 表格 名 对 应 ， 且 一 般 采 取 复 
数 的 形式 命名 。 而 对 于 资源 的 具体 操作 类 型 ， 则 
由 HTTP 动词 表示 ， 即 
GET/POST/PUT/PATCH/DELETE 等 。 


我 们 以 产品 products 为 例 ， 设 计 出 的 api 即 为 。 
GET /api/products,: 获取 所 有 产品 列表 。 
POST /api/products: 新 建 一 个 产品 。 


GET /api/products/:id: 获取 某 个 指定 产品 信 


EU 


PUT /api/products/:id: 更 新 某 个 指定 产品 信 


DELETE /api/products/:id: 删除 有 某 个 指定 产 
[| 
HH 。 


GET /api/products/:id/items: 获取 某 个 指定 产 
品 下 的 items 信 息 列 表 。 


在 需要 对 信息 进行 过 滤 的 情况 下 ， 以 query 参 
数 形式 进行 第 选 ， 例 如 : 


GET /api/products?1imit=10&offset=10&sortBy=name 


何 单 说 明 完 RESTful 后 ， 结 合 this.$resource， 
我 们 可 以 使 用 与 后 闹 接 口 对接 : 


var products = 
this.$resource('/api/products{/id}'"'); 
// 相当 于 发 起 异步 GET 请 求 ， 访 问 /api/products/1 接 口 ， 获 取 
指定 产品 信息 
products 

.get({ id : 1}) 

.then(function(rep) { 

this.$set('products', rep.json()); 


}) 
// POST /api/products 参数 为 data， 新 建 一 个 产品 


products 
,Save({}, data) 
.then(function(rep) { 


了 3) 


Vue-resource 提 供 了 6 个 默认 动作 行为 ， 分别 
及 ; 


get: {method: 'GET'}, 

save: {method: 'POST'}, 
query: {method: 'GET'}, 
update: {method: 'PUT'}, 
remove: {method: 'DELETE'}, 


delete: {method: 'DELETE'} 


除了 默认 行为 外 ，Vue-resource 也 人 允许 我 们 目 
定义 行为 ， 例 如 : 


Var customActions = { 
order : { method: 'POST', Url : 
'/api/products{/id}/orders'} 


var products = 
this.$resource('/api/products{/id}'"'); 
// 即 调用 异步 接口 POST /api/products/1/orders 
products 

.order({ id : 1}) 

.then(function(rep) { .... }) 


CC 


7.2.6 ”封装 Service 层 


在 编写 SPA 应 用 中 ， 我 们 通 凋 会 把 和 后 闪 做 数 
据 交 互 的 方法 封装 成 一 个 Service 模 块 ， 供 不 同 的 
组 件 进行 使 用 。 我 们 可 以 新 建 一 个 文件 夹 api， 将 
Service 模 块 集中 起 来 ， 并 按 资 源 进行 分 类 。 


以 上 述 products 资 源 为 例 : 


/apivproducts, js 
const API_URL = '/api/products; 
export default { 
get(context, productId) { 
return context.$http(t 
Url : API_URL + '/' + productId, 
method : 'get' 
了 了) 
query(context, params) { 
return context.$http(t 
url : API_URL, 
params : params 


}) 
} 


| 


在 组 件 中 调用 方式 如 下 : 


Import productsSrv from './api/products.js'; 

var ProductDetail = Vue.component('product- 

detail', { 

route : { 
data : function(transition) { 
productsSrv 

.duery(this, transition.to.params) 
.then(function(rep) { 


7.3 Vue-devtools 


在 开发 时 我 们 通常 需要 观察 组 件 实例 中 的 data 
属性 的 状态 ， 方 便 进 行 调试 。 但 一 般 组 件 实例 并 
不 会 又 露 在 window 对 象 上 ， 我 们 无 法 直接 访问 到 
内 部 的 data 属 性 ; 知 只 通过 debugger 或 console.log 


方法 进行 调试 难免 太 过 低 效 。 所 以 Vue.js 官 方 出 了 
-es devtools， 它 可 以 在 chrome 的 
开发 者 模式 下 和 直接 查看 当前 页 面 的 Vue 实 例 的 组 件 
结构 和 内 部 属性 ， 方 便 我 们 直接 观测 。 


7.3.1 ”安装 方式 


可 以 通过 Chrome Web Store 直 接 进 行 安装 ， 地 
址 为 : 


https://chrome.google.com/webstore/detail/vuejs- 
devtools/nhdogjmejiglipccpnnnanhbledajbpd 


也 可 以 通过 源码 手动 安装 。 
1) 下 载 源 码 : git clone 


https://github.com/vuejs/vue-devtools 。 
2) 进入 目录 : cd vue-devtools/。 
3) 安装 依赖 : npm install 。 


4) 运行 生成 插件 : npm run build 。 


5) 进入 chrome 插 件 管理 页 面 : 


chrome://extensions/ ° 


6) 勺 选 “开发 者 模式 ”， 点 击 “ 加 载 已 解压 的 
扩展 程序 ”， 选 择 文件 安 痛 即 可 。 


7.3.2 ”使 用 效果 


在 Chrome 浏 哆 絮 下 访问 Vue.js 应 用 ， 打 开 “ 开 
发 者 模式 ”， 会 发 现 多 了 一 个 Vue 的 栏目 ， 如 图 7-1 
所 示 。 


图 7-1 


氮 击 后 即 可 看 到 组 件 的 结构 和 组 件 实例 中 的 
属性 ， 并 且 点 击 组 件 内 的 子 组 件 也 可 以 获得 于 组 
件 实例 的 属性 ， 如 图 7-2 所 示 。 


< > 
A RouterApp RouterApp © Inspect DOM 转 Send to console 
v <Anonymou router-view: /teachers/:id 


Component 


Native 


path: "/teachers/1" 


图 7-2 


另外 ， 点 击 “send to console” 即 可 见 当前 选中 
组 件 的 $vm 赋 值 囊 window.$vm 上 ， 这 样 在 控制 台 
中 也 可 以 对 组 件 进行 修改 和 调试 。 


第 8 章 ”Vue.js 工 程 实例 


本 章 主 要 介绍 如 何 使 用 Vue.js 进 行 实 际 SPA 项 
目的 开发 ， 包括 使 用 Vue-router 和 Vue-resource 进 行 
路 由 管理 和 后 闹 数 据 交 互 ， 以 及 webpack 和 vue- 
loader 进 行 模 块 化 开发 ， 代 码 编译 和 打包 ， 最 终 通 
过 目 动 部 署 工 具 jenkins 来 对 项 目 进行 目 动 化 部 
省 O 


8.1 ”准备 工作 


在 本 章 中 ， 我 们 会 采用 ES6 的 语法 进行 开发 ， 
并 使 用 vue-loader 和 webpackj 进 行 代 码 的 编译 ， 所 
0 介绍 下 这 两 个 工具 的 使 用 方式 和 起 到 的 


8.1.1 webpack 


webpack 坪 一 多 模块 加 载 及 处 理工 具 ， 它 能 把 
各 种 资源 ， 例 如 JS ( 含 JSX) 、coffee、 样 式 〈 含 
less/sass) 、 图 片 等 都 作为 模块 来 使 用 和 处 理 。 也 
就 是 说 ，webpack 可 以 把 ES6 语 法 的 js 文件 ，sass 样 
式 等 无 法 直接 在 浏 蜗 絮 中 使 用 的 语言 编译 成 济 哎 


句 支 持 的 形式 ， 也 可 以 把 需要 的 文件 进行 合并 、 
压缩 混淆， 如 图 8-1 所 示 。 


| 


.CSS 


回回 


模块 及 其 依赖 webpack 静态 资源 


MODULE BUNDLER 


图 8-1 


我 们 可 以 使 用 npm install webpack -g 的 方式 全 
局 安装 webpack， 然 后 在 项 目 根 路 人 径 下 配置 一 个 
webpack.config.js 文 件 ， 例 如 ; 


var HtmlwebpackPlugin = require('html-webpack- 
plugin"') 
module.exports = { 
// 页 面 入 口 文 件 配置 
entry: { 
index : './src/app.js' 


}, 
// 入 口 文件 输出 配置 
output: { 


path: ',/dist， // 输出 目录 
filename: '[name].[hash].js' // 设 置 输出 文件 名 
字 ， 此 例 中 为 入 口 文件 名 字 加 上 hash 值 。 使 用 hash 值 的 原因 是 生成 
狐 文 件 后 避免 缓存 导致 用 户 没 有 更 新 到 新 的 js 文件 
}, 
module: { 
// 加 载 硕 配置 
// 加 载 器 会 把 test 所 匹配 的 文件 加 入 loader 进 行 处 理 
// 例如 下 面 的 babe1， 起 到 的 作用 残 是 将 匹配 到 的 js 文件 中 
下 一 代 的 JavaScript 〈 即 使 用 ES2015 、es6 等 特性 的 
JavaScript) 编译 成 能 在 当前 浏览 器 环境 下 运行 的 js 代码 
loaders: [ 


test; 八 .js$/， // test 即 为 匹配 规则 ， 此 处 即 为 
将 所 有 后 级 为 .js 的 文件 加 载 进来 
loader: 'babel'， // loader 即 为 处 理 器 ， 所 有 
符合 规则 的 文件 会 交 由 loader 进 行 处 理 
exclude: /node modules/ // 
}) 
// vue-loader 是 对 于 .vue 文件 专门 的 处 理 器 ， 能 将 .vue 
文件 中 的 模板 、 样 式 、js 代 码 解 析 并 编译 成 可 执行 的 代码 
{ 


test: /\.vue$/, 
loader: 'vue' 
}, 
i ] 
// plugins 为 webpack 的 插件 功能 ， 可 利用 一 些 第 三 方 插件 完 
成 一 些 额外 的 操作 
// 例如 nHtmlwebpackPlugin， 这 个 插件 可 以 帮助 生成 HTML 
文件 ,在 body 元 素 中 使 用 script 来 引用 output 中 最 后 输出 的 
js 文件 
plugins : [ 
new HtmlwebpackPlugin({ 
filename: 'index.html', 
template: 'index.html', 
inject: true 


总 结 一 下 的 话 ， 上 面 这 个 例子 的 作用 将 会 处 
理 文件 ./src/app.js， 将 其 所 包含 的 依赖 (通过 
import 或 require 引 入 的 其 他 js 和 .vue 文 件 ) 文件 ， 
将 其 中 的 ES6 语 法 编译 成 浏 贤 絮 能 运行 的 JS 语 法 ， 
以 及 处 理 .vue 文 件 中 的 模板 、 样 式 和 JS 代 码 ， 最 后 
将 其 合并 成 一 个 js 文件 ， 输 出 到 output 中 设置 的 路 
任 和 和 名称， 最 后 通过 HtmlWebpackPlugin 插 件 指定 
的 index.html 模 板 ， 将 这 个 文件 通过 script 形 陈 插 入 
到 <body> 中 ， 最 终生 成 静态 文件 index.html 和 app. 
[hash].js 文 件 。 


8.1.2 vue-loader 


vue-loader 是 webpack 的 一 个 loader 加 载 颖 ， 用 
于 处 理 我 们 编写 的 .vue 文 件 。 在 早期 进行 组 件 化 编 
写 时 ， 我 们 往往 会 把 一 个 组 件 的 html、css、js 放 在 
三 个 不 同 的 文件 中 ， 然 后 利用 编译 工具 再 合 到 一 
起 。 这 样 产 生 的 不 便 了 驶 是 文件 过 多 ， 人 和 修改 一 个 组 
件 需要 打开 三 个 文件 ， 开 发 的 过 程 中 经 党 需要 不 


汤 地 切换 视 突 。 人 然而 vue-loader 的 出 现 ， 使 得 我 们 
能 将 一 个 组 件 的 html 、css、js 放 在 一 个 文件 中 ， 用 
不 同 的 标签 包 嘻 住 即 可 。vue-loader 会 将 这 三 块 代 
人 码 分 别 编译 成 可 执行 的 代码 。 


使 用 之 前 ， 需 要 先 按 照 vue-loader， 以 及 所 需 
要 的 用 作 编译 的 其 他 loader 。 


npm install \ 

webpack webpack-dev-server \ 

vue-loader vue-html-loader css-loader vue-style- 
loader vue-hot-reload-api \ 

babel-loader babel-core babel-plugin-transform- 
runtime babel-preset-es2015 \ 


babel-runtime\ 
--Save-dev 


我 们 可 以 这 样 编写 .vue 文 件 : 


<template> 
<ul> 
<1i><a VvV-link="{ name : 'home'}"> 首 页 </a></1i> 
<1i><a v-1link="{ name : 'list'}"> 列 表 页 </a> 
</11i> 
</ul> 
</template> 


<script type="text/ecmascript-6"> 
export default { 
data () { 
return { 


} 
}, 
methods : { 


} 
} 


</script> 


display: flex; 

} 

UL JI f 
list-style: none ; 
flex:1; 


} 
</style> 


template 标 和 俭 中 的 即 为 该 组 件 的 DOM 结 构 ， 默 
认 采 用 HTML 形式 ， 每 个 .vue 文 件 中 最 多 只 能 包含 
一 个 template 标 和 伴 。 由 于 template 采 用 的 模板 引擎 
是 consolidate.js(https://github.com/tj/consolidate.js) 


， 文 持 大 部 分 的 模板 语法 ， 我 们 可 以 通过 配置 


的 lang 属 性 ， 使 用 不 同 的 模板 语法 ， 例 
|: 


<template lang="jade"> 
ul. 
1]1i 
a(v-link="{ name : 'home' }") 首页 
1]1i 
a(v-link="{ name : 'list' }") 列表 页 


</template> 


script 标 窒 中 即 为 该 组 件 的 js 代码 ， 且 同 
template 一 样 ， 一 个 .vue 文 件 中 最 多 只 能 包含 一 个 
script 标 签 ， 而 且 最 终 必 须 输 出 (export) 一 个 符合 
Vue.extend0 参 数 规 苑 的 对 象 ， 用 于 建立 Vue 组 件 构 
建 希 。 例 如 上 例 中 export default 输 出 的 对 象 。 


style 标 签 即 为 该 组 件 的 CSS 代 人 码 ， 同 个 vue 文 
件 中 可 以 包含 多 个 style 标 签 。 除 了 直接 使 用 CSS 写 
法 外 ， 还 可 以 通过 配置 ljoader， 文 持 sass、]less 等 样 
式 写 法 。 另 外 还 有 一 个 scoped 属 性， 添加 之 后 ， 
vue-loader 会 把 当前 同 .vue 文 件 template 中 的 DOM 都 
添加 一 个 _v.…. 的 属性 ， 并 把 style 中 的 样式 也 加 上 
对 应 的 属性 选择 器 ， 使 得 这 部 分 样式 仪 在 当前 vue 


的 DOM 中 生效 。 这 个 方式 使 得 组 件 间 的 样式 不 会 
互相 冲突 ， 也 不 需要 过 长 的 命名 来 维护 。 例 如 : 


<style scoped> 
ul 


‘ 
display: flex; 


} 

ul 1i { 
list-style: none; 
flex:1; 


} 
</style> 
<template> 
<uUul> 
<1i><a v-link="{ name : 'home'}"> 首 页 </a></1i> 


<1Li><a Vv-link="{ name ; 'list'}"> 列 表 页 </a> 
</1i> 


</ul> 
</template> 


我 们 在 浏览 絮 中 得 到 的 输出 的 样式 即 为 : 


v<style type="text/css 
ul[_v-5584bc67] 芯 
display: -webkit-box ; 
display: -ms-flexbox; 
display: flex; 
in 


ul li[_ Vv-5584bc67] { 
list-style: none; 
-webkit-box-—flex:1; 


-ms-flex:1; 
TKt 1 
tyle 
» 
HTML 结 构 为 : 
1 5584bc6 
_v-5584bc67 
a v-link="{ name : “home'}”_v-5584bc67> 善 页 </a 
Et 
v<\li _v-5584bc67 
a v-link="{ name : 'list'}"” _v-5584bc67> 列 表 页 </a 


/Li 


8.2 ”目录 结构 


Vue.js 有 一 慰 官 方 的 脚 手 染 生成 工具 vue-dli， 
可 以 通过 npm install -g vue-dli 进 行 金 局 安装 。 之 后 
束 可 以 使 用 命令 vue init <template-name> <project- 
name> 进 行 脚手架 的 安装 。 


vue-cli 忌 共 提 供 了 5 种 脚手架 ( 即 可 使 用 的 


<template-name>)， 分 别 如 下 。 


webpack: 基于 webpack 和 vue-loader 的 目 条 结 
构 ， 而 且 文 持 执 部署、 代码 检查 、 测 斌 及 css 抽 


取 。 


webpack-simple: 基于 webpack 和 vue-loader 的 
目录 结构 。 


browerify: 基于 Browerfiy 和 vueify (作用 于 
vue-loader 类 似 ) 的 结构 ， 文 持 热 部 署 、 代 码 检 查 
及 单元 测试 。 


browerify-simple: 基于 Browerfiy 和 vueify 的 结 
构 。 


simple: 单个 引入 Vue.js 的 index.html 页 面 。 
这 里 我 们 主要 会 使 用 webpack 作 为 常用 脚 手 


架 ， 可 以 运行 vue init webpack my-project 来 生成 项 
目 。 如 图 8-2 所 示 。 


localhost:Desktop GavinCLY$ vue init webpack my-project 


? Target directory exists. Continue? No 
localhost:Desktop GavinCLY$ vue init webpack my-project 


? Project name my-project 

7 Project description A Vue.js project 

? Author Administrator <admin@local .host> 
? Use ESLint to lint your code? Yes 

? Pick an ESLint preset Standard 

? Setup unit tests with Karma + Mocha? Yes 
? Setup e2e tests with Nightwatch? Yes 


vue-cli . Generated "my-project". 
To get started: 

cd my-project 

npm install 


npm run dev 


Documentation can be found at https://vuejs-templates .github.io/webpack 


localhost:Desktop GavinCLY$ 
图 8-2 


生成 的 目 永 结构 如 图 8-3 所 示 。 


FOLDERS 
vv CS my-project 
> 站 build 
» 门 config 
v CS src 
中 assets 
b [ 门 components 
App.vue 
由 main.js 
» 站 static 
v CO test 
> 站 e2e 
p> 站 unit 
.babelrc 
.editorconfig 
.eslintignore 
.eslintrc.js 


DEDDDD 


.gitignore 
index.html 
package.json 
README.md 


图 8-3 
build: 用 于 存放 webpack 相 天 配置 和 脚本 。 


config: 主要 存放 配置 文件 ， 用 于 区 分 开发 环 
境 、 测 试 环 境 、 线 上 环境 的 不 同 。 


src: 项 目 源码 及 需要 引用 的 资源 文件 。 
static: 不 需要 webpack 处 理 的 静态 资源 。 
test: 用 于 存放 测试 文件 。 
从 package.json 中 ， 我 们 可 以 看 到 项 目 支 持 有 的 
信人 : 


命令 有 


"Scripts"”: { 
"dev": "node build/dev-server.js"， // 开发 时 启动 
的 Server 服 务 


"build": "node build/build.js", // 代码 编译 

"unNit": "karma start test/unit/karma.conf.js -- 
single-run"， // 运行 单元 测试 

"e2e"; "node test/e2e/runner.js"， // 运行 e2e 测 试 

"test": "npm run unit && npm run e2e"， // 运行 单 
元 测试 和 e2e 测 试 

"lint": "eslint --ext .js,.vue src 


test/unit/specs test/e2e/specs" // 使 用 esLint 进 行 语 
法 检查 


} 


ER 


正常 开发 和 时， 融会 运行 命令 npm run dev， 局 
动 一 个 小 型 的 express 服 务 。 在 这 个 express 服 务 
中 ， 会 使 用 webpack-dev-middleware 和 webpack- 
hot-middleware 这 两 个 中 间 件 ， 来 进行 项 目的 热 部 
普 ， 即 每 次 修改 src 中 的 文件 后 ， 不 需要 再 按 浏览 
硕 的 刷 狐 来 更 新 代码 ， 局 动 的 server 服 务 会 目 动 监 
听 文 件 的 变化 并 编译 ， 通 知 浏 览 耸 目 动 刷 靳 。 


8.3 前端 开发 


src 目 孙 里 面 束 是 我 们 主要 的 前 妆 开 发 文件 ， 
由 于 脚手架 采用 了 vue-loader， 束 可 以 把 组 件 抽 和 象 
成 一 个 .vue 文 件 ， 并 把 所 需 的 样式 和 DOM 结 构 都 
0 ° 我 们 以 一 个 登录 实例 来 展示 整体 的 开 
情况 。 


日 录 情 况 如 下 : 


components 


-Login.vue 
main.js 


| 一 src 
es 

| | | 一 Main.vue 
人 


上 一 index.html 


index.html 代 人 码 如 下 : 


<1DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>my-project</title> 
</head> 
<body> 
<div id="app"> 
<router-view></router-view> 
</div> 
</body> 
</html> 


./src/main.js 代 码 如 下 : 


import Vue from 'vue' 


// Vue ,js 插件 


// 这 里 使 用 了 vue-router， 先 运行 hpm install vue-router 
-Save 进 行 安装 
Import VueRouter from 'vue-router' 


// 组 件 
Import Main from './components/Main.vue' 
import Login from './components/Login.vue' 


Vue ,Use(VueRouter ) 


var router = new VUeRouter({ 


}) 
router.map(t 
全 { 
name: ‘'main', 
component: Main 
}, 
'/login': { 
name: "login', 
component: Login 
} 
}) 
var App = Vue.extend({ 
}) 


router.start(App, '#app') 


components/Login.vue 
<template> 
<div class="]login"> 
<div class="input-wrap"> 
<input type="text" v-model="name" /> 
<span v-if="error.name" class="err-msg"> 
{{error.name}}</span> 
</div> 
<div class="input-wrap"> 


<input type="password" v-model="pwd" /> 
<span v-if="error.pwd" class="err-msg"> 
{{error.pwd}}</span> 
</div> 
<div class="input-wrap"> 
<button @click="login"> 提 交 </button> 
</div> 
</div> 
</template> 


<script> 
export default { 


methods : { 
check(name, pwd) 1{ 
if('iname) { 
this.error.name = ' 请 输入 姓名 '， 
return false; 


} 

if(!pwd) { 
this.error.name = ' 请 输入 密码 '， 
return false; 


return true; 


}, 


login() { 


const { name, pwd, $router} = this; 
if(!'this.check(name, pwd)) return,; 


if(name == 'admin' && pwd == 123) { 
$router.go({ name : 'main' }); 
} else { 
alert(' 用 户 名 密码 错误 ' ) ; 
} 
} 
} 
</script> 


<style scoped lang="scss"> 
.login { 
width: 300px; margin:10% auto; 


} 
</style> 


需要 注意 的 是 在 style 标 签 中 使 用 了 
lang=“scss” 这 样 的 属性 ， 也 整 说 此 处 的 写法 是 需 
符合 scss 规 范 的 ， 而 且 我 们 需要 在 webpack 的 配置 
中 加 上 sass 鸭 loader 用 来 编译 这 上 段 样 式 。vue-cli 默 
认 的 配置 中 并 没有 安装 sass-loader, 所 以 需要 目 己 


手动 安装 一 下 npm install sass-loader-dev-save °。 


在 build/webpack.base.conf.js 中 ，vue-loader 丙 0 
置 了 所 有 的 CSS 的 loader 处 理 硕 ， 如 图 8-4 所 示 。 


module: {ms 


}) 


vue: { 
loaders: utils.cssLoaders() 
} 


图 8-4 


引用 的 古 build/utils 中 的 方法 ， 如 图 8-5 所 示 。 


exports.cssLoaders = function (options) { 
options = options {} 


function generateLoaders (loaders) { 
var sourceLoader = loaders.map(function (loader) { 
Var extraParamChar 
(/\?/.test(loader)) { 

Loader = loader.replace(/\?/, '-loader?') 
extraParamChar '&' 

} 
loader = loader '—loader' 
extraParamChar 2 


} 
loader + (options,.sourceMap ? extraParamChar + 'sourceMap' 0,) 
ajoin( se) 


(options.extract) { 
ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 


{ 


['vue-style-loader', sourceLoader].ijoin('!') 


{ 
css: generateLoaders(['css']), 
postcss: generateLoaders(['css']), 
less: generateLoaders(['css', 'less']), 
sass: generateLoaders(['css', 'sass?indentedSyntax']), 
scss: generateLoaders(['css', 'sass']), 
stylus: generateLoaders(['css', 'stylus']), 
styl: generateLoaders(['css', 'stylus']) 


图 8-5 


所 以 如 果 用 的 是 其 他 CSS 预 处 理工 具 ， 也 只 需 
要 安 猴 不 同 的 预 处 理 loader 即 可 ， 基 本 不 用 修改 里 
面 的 webpack 配 置 。 


./Src/components/main.vue 
<template> 
<div class="main"> 
<h1i>{{ msg }}</hi1> 
</div> 
</template> 


<script> 
export default { 
data () { 
return 1{ 
msg: 'Welcome to the Vue.js' 
} 
} 
} 
</script> 


<style scoped lang="scss"> 
.main { 
font-size: 14px; 
color: #58666e; 
background-color:#1c2b36; 


} 
</style> 


| 


这 样 一 个 基本 的 登 好 校 答 及 跳 转 主 页 面 的 功 
能 束 完 成 了 ， 实 际 的 戏 来 与 url 路 径 如 下 。 


登 杂 页 面 如 图 8-6 所 示 。 
Ee canotaco won 


图 8-6 


稍 误 握 示 页 面 如 独 8-7 所 示 。 


| localhost:8080/#!/login 


请 输入 姓名 


8-7 


输入 admin、123 成 功 跳 转 ， 如 图 8-8 所 示 。 


图 8-8 


8.4 ”后 端 联 调 


在 正音 开发 中 ， 前 病 和 后 关联 调 是 必 不 可 人 少 
的 一 环 。 由 于 我 们 已 经 采用 前 后 闹 分 离 的 方式 进 
行 开 发 ， 所 以 也 豆 不 需要 在 本 地 部 车 一 父 后 端 系 
统 了 。 通 带 可 以 直接 远程 调用 后 端的 数据 接口 

(比如 开发 环境 或 测试 环境 的 接口 ) 。 但 在 本 地 

调试 时 ， 我 们 不 能 直接 在 前 问 页 面 中 访问 其 他 ip 的 
接口 ， 人 否则 会 有 骂 域 的 问题 ， 所 以 一 般 也 会 在 本 
地 局 动 一 个 代理 服务 器 ， 拦 截 前 端 页面 的 异步 请 
求 ， 从 本 地 服务 问 园 发 到 远程 服务 器 ， 得 到 
response 后 青 返 回 给 前 端 页面 。 

vue-cli 搭 建 的 webpack 脚 手 架 中 束 包 含 了 一 个 
微型 的 代理 服务 右 ， 我 们 只 需要 进行 一 些 配置 ， 
吏 可 以 在 本 地 调用 远程 服务 接口 ， 在 
config/index.js 中 


var path = reduire( ' path ' ) 


module.exports = { 
build: { 
env: require('./prod.env’'), 
index: path.resolve(__dirname, 
'../dist/index.html'), 
assetsRoot: path.resolve(__dirname, 
',../dist'), 
assetsSubDirectory: 'static', 
assetsPublicPath: '/", 
productionSourceMap: true, 
productionGzip: false, 
productionGzipExtensions: ['js', 'cSsS'] 


dev: { 
env: require('./dev.env'), 
port: 8080, 


assetsSubDirectory: 'static', 
assetsPublicPath: '/", 
proxyTable: {}, 

cssSourceMap: false 


dev 必 性 中 的 proxyTable 职 是 服务 的 代理 配置 
项 ， 使 用 方式 如 下 ; 


proxyTable : { 
'/api': { 
target: 'http://test.server.com',， // 远程 服务 域 


名 
changeOrigin: true, 
pathRewrite: { 
'A/api': '/api' 


这 样 配 置 的 作用 相当 于 在 前 端 页 面 发 了 一 个 
url 为 /api/users/1 的 寞 步 请 求 ， 代 理 服 务 右 将 其 转发 
下 了 http://test.server.com/api/users/1 上 ， 然 后 返回 
数据 ， 这 样 吏 不 会 出 现 器 域 鸭 问题 ， 也 实现 了 前 
后 端 分 离 和 联 调 。proxyTable 最 终 会 传递 
到 ./build/dev-server.js 中 的 express 服 务 中 ， 通 过 
http-proxy-middleware 中 间 件 进行 使 用 ， 详 细 的 配 
置 说 明 可 以 访问 https:/github.com/chimurai/http- 
proxy-middleware 了 解 。 


配置 完 代 理 服务 兹 后 ， 我 们 束 可 以 使 用 vue- 
resource 来 进行 数据 请 求 了 。 通 音 会 把 单个 资源 的 
数据 交互 抽象 成 一 个 模块 ， 添 加 a 到 文件 来 api 中 ， 
供 各 组 件 调用 。 我 们 以 auth.js 为 例 ， 用 于 处 理 用 户 
登 孙 注册 等 方面 的 请 求 : 


| 一 src 
| | 一 api 


上 一 auth ,js 


./src/api/auth.js 代 码 如 下 : 


const API_URL = '/api/auth'; 


export default f{ 
login(context, name, pwd) { 
return context.$http(t 
Url : API_URL + '/login', 
method : 'post', 
data : { 
name, 


pwd 


然后 我 们 和 完 修改 main.js， 加 入 vue-resource: 


Import VueResource from 'vue-resource,' 
Vue .use(VueResource) 


然后 将 ./src/components/Login.vue 中 的 login 方 
法 修改 为 : 


import authSrv from './../api/auth.js'; // 引入 
service 模 块 


login() { 
const { name, pwd, $router} = this; 
if(!this.check(name, pwd)) return; 


authSrv 
.login(this, name, pwd ) 
‘then(rep => { 


if(!rep.code) { 
$router.go({ name : 'main' }); 
} else { 


alert(' 用 户 名 密码 错误 ' ) ; 
} 
}) 


需要 注意 的 是 ， 本 地 和 正式 上 终 的 后 端 接口 
路 径 尽 量 保持 一 致 ， 例 如 本 地 访问 
http://localhost/api/auth/login ， 线 上 接口 的 地 址 最 
好 也 是 http:/prod.api.comyapi/auth/login ， 这 样 部 署 
上 上 线 后 不 需要 修改 /api 目 了 永 下 模块 的 路 径 锅 量 ， 人 否 
则 可 能 需要 nginx 等 服务 硕 软 件 做 代理 服务 。 


8.5 部署 上 线 


项 目 本 地 开发 完成 后 ， 我 们 整 需 要 将 代码 部 

署 到 线 上 服务 部 。 在 此 之 前 ， 就 需要 把 这 些 雪 和 散 

的 文件 打包 压缩 成 一 个 css 和 js 文件 ， 以 减少 HTTP 
的 请 求 数 ， 避 免 额外 的 性 能 损耗 。 另 外 ， 我 们 也 

经 常会 用 到 版 本 管理 工具 和 目 动 化 部 署 工 具 ， 本 

玉 也 会 商 单 介绍 下 gitltab 和 jenkins 这 两 个 单 用 的 开 
源 项 目 ， 便 于 搭建 目 己 公司 的 代码 管理 工具 和 目 

动 化 部 署 平 台 。 


8.5.1 ”生成 线 上 文件 
vue-cli 中 提供 了 代码 编译 、 合 并 、 压 顷 的 脚本 


build/build.js， 运 行 npm run build 后 我 们 得 到 的 文 
件 ， 如 图 8-9 所 示 。 


SS dist 
SS static 
css 
四 app.f696f80ae2bede3c453746ddccec4c17.css 
[BO app.f696f80ae2bede3c453746ddccec4c17.css.map 
ijs 
四 app.28310fe6bc28ebc232bc.js 
[BH app.28310fe6bc28ebc232bc.js.map 
四 manifest.fe2498bc18e84037bc84.js 
[BH manifest.fe2498bc18e84037bc84.js.map 
四 vendor.8b52980flf6c6c6acfe4.js 
[DB vendor.8b52980flf6c6c6acfe4.js.map 
index.html 


图 8-9 


build.js 将 组 件 中 的 css 编 译 合并 成 一 个 app. 
[hash].css 的 文件 ，js 则 在 合并 后 又 拆 解 成 了 3 个 文 
件 ，app.[hash].js 包 舍 了 上 所 有 components 中 的 js 代 
人 码 ，vendor.[hash].js 包 含 了 所 有 3 引用 的 
node_modules 中 的 代码 ， 而 mainfest.[hash].js 则 包 
舍 了 webpack 运 行 环 境 及 模块 化 所 需 的 js 代码 。 这 
样 拆 分 的 好 处 是 ， 每 块 组 件 修改 重新 编译 后 不 影 
呵 其 他 未 修改 的 js 文件 的 hash 值 ， 这 桩 能够 最 大 限 
度 地 使 用 缓存 ， 减 少 HTTP 的 请 求 数 。 


8.5.2 nginx 


Nginx 是 一 款 轻 量 级 、 高 性 能 的 HTTP 和 反问 
代理 服务 器 。 如 果实 际 情况 中 前 端的 静态 资源 和 
后 端 服务 需要 分 别 部 署 在 不 同 jp 的 服务 器 上 时 ， 我 
们 就 可 以 使 用 nginx 配 置 来 避免 跨 域 的 问题 。 


下 面 以 centos 为 例 ， 人 简单 说 明 nginx 的 安装 和 
配置 。 


Nginx 依 顿 于 pcre，openss1，zlib 这 几 个 软件 ， 
首 移 通 过 yum 进 行 安 竣 : 


install -y pcre pcre-devel 
install -y zlib zlib-devel 
install -y openssl openssl-devel 


然后 从 nginx 家 网 下 载 你 所 需要 版 本 的 压缩 


wget http://nginx.org/download/nginx-1.8.0.tar.gz 


解压 后 进入 目录 ， 并 进行 配置 编译 和 安装 。 


tar zxvf nginx-1.8.0.tar.gz 
cd nginx-1.8.0 

./configure 

make && make install 


这 样 就 安装 在 了 默认 路 低 /usr/local/nginx 下 ， 
我 们 需要 修改 的 配置 文件 为 conf/vhost/ 中 的 *.conf 
文件 ， 通 过 配置 rewrite 方 式 将 发 送 到 前 痪 服务 壤 
上 的 数据 请 求 转发 到 后 端 服 务 絮 中 。 


例如 ， 将 打包 好 的 index.html 放 置 到 
www.domain.com 下 ， 而 后 端 服务 则 在 域名 
data.domain.com 下， 这 时 就 需要 进行 如 下 配置 : 


server { 
listen 80 ; 
server_name www.domain.com; 
index index.html index.htm index.php; 
root /www/; // index.html 放 置 的 服务 器 目录 


location 人 ^~ /api/ { // 匹配 所 有 以 
www.domain .com/api/ 开 头 的 请 求 
proxy_pass http://data.domain.com; // 实际 请 求 到 


的 地 址 为 http://data.domain.com/api/ 
} 


} 


8.5.3 gitlab 


GitLab 是 基于 Ruby on Rails 的 一 个 开源 版 本 
管理 系统 ， 实 现 一 个 自 托 管 的 Git 项 目 仓 库 。 我 们 
可 以 在 目 己 的 服务 器 上 搭建 一 套 Gitlab 系 统 ， 便 于 
公司 的 代码 管理 。 


Gitlab 可 以 通过 官网 
https://about.gitlab.com/downloads/ ， 选 择 所 需 的 服 
务 升 版本， 然后 根据 提供 的 安 竣 步 又 进行 安 状 ， 

如 图 8-10 所 示 。 


| ID 奖 因 心 2 
yy GitLab Download Features Pricing Community Explore Blog QQ 


Download GitLab Community Edition (CE) 


Installa GitLab CE Omnibus package on 


Select Operating System ~ 


Ubuntu 12.04 
Ubuntu 14.04 (for 15.04 select and download the package manually) 
Ubuntu 16.04 (recommended) 


Debian7 
Sign up for our monthly newsletter to stay Debian 8 
up-to-date with new features, security 
CentOS 6 (and RedHat/Oracle/Scientific Linux 6) 
updates and product releases. 
CentOS 7 (and RedHat/Oracle/Scientific Linux 7) 
Raspberry Pl 2 on Raspbian 


Compare GitLab CE with EE 


图 8-10 


安装 好 后 可 以 通过 提供 的 管理 员 账号 进行 登 
录 ，Gitlab 的 使 用 方式 和 Github 类 似 ， 我 们 可 以 为 
项 目的 前 端 项 目 工程 新 建 一 个 git， 如 图 8-11 所 
Ro 


Dashboard Q Search © @ H+ 切 
之 Push events 区 Mergeevents 全 Comments 名 Team N Activity Feed 
Filterby name 
[i Eg 3 days ago H == > 
262 dd logs di 
cc262aac add logs dir 本 


1 
POP 3 days ago 


ER | 3 days ago 
3ca2563b no message 
b4686305 no message 


and 54 more commits. Compare 9a9776df...3ca2563b 


图 8-11 


一 般 来 说 ，git 项 目 会 分 成 master、develop、 
feature、hotfix 这 几 种 分 文 类 型 : 


mater 为 主 分 文 ， 主 要 用 于 发 布 ， 代 码 永 远 处 
于 稳定 可 产品 化 发 布 的 状态 。 


develop 为 开发 分 文 ， 主 要 记录 开发 状态 下 相 
对 稳定 的 版 本 。 


feature 为 功能 分 文 ， 从 develop 上 拉 取 代码 ， 
开发 完成 后 再 合并 到 develop 分 文 上 。 经 角 用 于 一 
个 大 版 本 develop 拆 分 成 几 个 feature 的 场景 ， 便 于 
多 个 开发 人 员 在 同一 版 本 迭代 中 开发 各 目 不 同 的 
功能 点 ， 避 人 免 代 码 冲 突 ， 在 开发 完成 后 再 合并 到 
develop 分 文中 进行 测试 。 

hotfix 为 紧急 线 上 修复 分 支 ， 需 要 从 master 上 


拉 取 分 文 进行 bug 修 复 ， 修 复 完 成 后 分 别 并 入 
master 和 develop 分 文 。 


8.5.4 jenkins 


Jenkins 是 一 个 开源 的 持续 集成 系统 ， 方 便 开 
发 者 利用 疼 形 界面 进行 项 目 部 闭 发 布 等 固定 操 
作 ， 通 党 也 会 和 Gitlab 配 合 起 来 ， 在 git push 完 成 后 


触发 设 定好 的 操作 ， 例 如 将 代码 部 署 到 某 个 开发 
环境 中 。 


Jenkins 本 身 是 用 Java 开 发 的 ， 需 要 jdk 的 环 
境 ， 再 从 http://mirrors.jenkins- 
ci.org/war/latest/jenkins.war 下 载 最 狐 的 war 包 ， 然 
后 解压 到 某 个 固定 目录 束 算 安 狠 完成 了 ， 非 弟 方 
便 。 直 接 使 用 命令 行 java -jar jenkins.war 即 可 ， 如 
果 要 以 后 台 进 程 的 方式 局 动 ， 改 成 nohup java -jar 
jenkins.war & 即 可 ， 局 动 过 程 中 ， 它 会 将 war 包 解 
压 到 ~/.jenkins 目 永 下 ， 并 生成 一 些 目 孙 及 配置 文 
件 ， 如 图 8-12 所 示 。 


全 新建 做 添加 说 明 

起 RF 

一 4 Ss W Name | 上 次 成 功 上 次 失败 上 次 持续 时 间 

e。 示 统管 理 "> #11 色 

生 My views RS | #61 #9 径 

es 司 “ae #97 #18 经 
只 Ss 类 把 从 
-J 上 经 多 
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Jenkins 中 以 ‘Job’ 作 为 任务 单位 ， 我 们 可 以 通 
过 新 建 Job 进 行 配置 ， 如 图 8-13 所 示 。 


General 


委 8-13 


General: 主要 包 舍 了 Job 的 基本 信息 配置 ， 例 


如 项 目 名 称 、 插 述 等 属性 ， 如 图 8-14 所 示 。 


[Plai nh 
Gitt 
GitLab 
Thr | 
7 
R 
Label Expression develop 
Label d 
图 8-14 


源码 管理 ， 可 以 和 git 配 合 使 用 ， 主 要 用 于 
jenkins 拉 取 源 人 码 ， 如 图 8-15 所 示 。 


全 全 全 全 全 全 全 
ww NS 


源码 管理 


None 


© Git 
Repositories 匾 恒 ®@ 
Rep URL oi ot 
C tial i $+ 0= Adg 
Add Repository 
B b 展 司 
Branch S blankf ) limninnie © 
Add Branch 
( 目 动 ) [a 
Additional Behaviours Add v 
图 8-15 


构建 触发 絮 : 对 于 在 开发 环境 经 单 需要 发 布 
的 项 目 来 况 ， 可 以 便 用 构建 触发 碳 ， 在 git push 后 
目 动 部 署 到 开发 服务 硼 上 ， 如 图 8-16 所 示 。 


构建 触发 器 


触发 远程 构建 (例如 ,使 用 脚本 ) 
Build after other projects are built 
Build periodically 


Build when a change is pushed to GitHub 


Build when a change is pushed to GitLab. GitLab Cl Service URL: http // Aboss-dev-admin-plan-api 


Build on Merge Request Events 
Build on Push Events 
Rebuild open Merge Requests Never 
Enable [ci-skip] 


Set build description to build cause (eg. Merge request or Git Push ) 
Add note with build status on merge requests 
Vote added to note with build status on merge requests 
Accept merge request on success 


©@ Allow all branches to trigger this job 加 
Filter branches by name (2 


Filter branches by regex 加 


在 GitLab 中 配置 Jenkins 中 提供 的 GitLab CI 
Service URL， 即 可 在 分 文 push 的 时 候 就 执行 该 
Job， 如 图 8-17 所 示 。 


CE a 


GitLab CI 
Continuous integration server from GitLab 


二 to services 


Active 
Trigger Push events 
This url will be triggered by a push to the repository 
Tag push events 
This url will be triggered when a new tag is pushed to the repository 
Token 
Project url 
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构建 环境 对 jenkins 所 在 的 服务 右上 的 环境 
做 相应 的 配置 ， 如 图 8-18 所 示 。 


构建 环境 
Delete workspace before build starts 
Send files or execute commands over SSH before the build starts [2 
Send files or execute commands over SSH after the build runs 加 
Abort the build if it's stuck 
Add timestamps to the Console Output 
Execute shell script on remote host using ssh [2 
| Provide Node & npm bin/ folder to PATH 
SSH Agent 
Use secret text(s) or file(s) 回 


图 8-18 


构建 : 执行 shell 脚 本 ， 例 如 进行 npm run build 
的 编译 行为 ， 将 源码 编译 成 最 终 可 执行 的 文件 ， 


并 进行 压缩 合并 及 发 布 到 线 上 服务 器 。 


构建 后 操作 ， 整 个 任务 部 署 完成 后 可 进行 的 
操作 ， 在 这 里 可 以 配置 邮件 通知 等 行为 。 


小 结 


本 章 主 要 介绍 了 Vue.js 在 实际 项 目 中 的 目录 结 
构 及 应 用 ， 正 式 上 线 所 需 的 编译 、 合 并 、 压 缩 等 
步 台 ， 本 地 开发 时 与 后 端的 联 调 以 及 开发 完成 后 
目 动 化 部 署 和 服务 器 配 置 等 。 这 些 步 又 中 所 涉及 
的 webpack、nginx、gitlab、jenkins 等 工具 的 配 
备 ， 虽 然 不 是 前 器 必须 所 营 握 的 技能 ， 但 对 于 设 
计 整 体 的 前 端 解决 方案 来 说 却 是 必 不 可 少 的 环 
站。 前 端 开 发 痢 也 会 逐渐 从 最 初 的 页 面 编写 、js 特 
效 等 方面 成 长 为 整体 解决 方案 的 提供 着 。 


第 9 间 ”状态 管理 : Vuex 


在 一 些 太 型 应 用 中 ， 有 时 我 们 会 过 到 单 页 面 
中 包 人 台 厦 大量 的 组 件 及 复杂 的 数据 结构 ， 而 且 可 
能 各 组 件 还 会 互相 影响 各 目的 状态 ， 在 这 种 情况 
下 组 件 树 中 的 事件 流 会 很 快 变 得 非常 复杂 ， 也 使 
调试 变 得 异常 困 难 。 为 了 解决 这 种 情况 ， 我 们 往 
往 会 引入 状态 管理 这 种 设计 模式 ， 来 降低 这 种 情 
况 下 事件 的 复杂 程度 并 且 使 调试 变 得 可 以 奶 踩 。 
而 Vuex 职 是 一 个 专门 给 为 Vue.js 设 计 的 状态 管理 加 
和 多 。 本 昔 主 要 介绍 Vuex 的 基本 用 法 和 一 旦 使 用 声 


怀 “ 


9.1 概述 


Vuex 坪 状态 管理 模式 的 一 种 实现 库 ， 主 要 以 
插件 的 形式 和 Vue.js 进 行 配合 使 用 ， 能 够 使 我 们 在 
Vue.js 中 审理 复杂 的 组 件 事 件 流 。 


通常 情况 下 ， 每 个 组 件 剖 会 拥有 目 己 的 状 
仿 ， 也 可 以 理解 成 目 映 实例 中 的 data 对 象 。 用 户 在 
操作 的 过 程 中 ， 会 通过 一 些 交 互 行为 ， 例 如 所 
击 、 输 入 、 拖 动 等 修改 组 件 的 状态 ， 而 此 时 往往 
需要 将 用 户 引 起 的 状态 变化 通知 到 其 他 相关 组 
件 ， 让 他 们 也 进行 对 应 的 修改 。 由 于 Vue.js 本 喘 的 


事件 流 是 依赖 于 DOM 结 构 的 ， 组 件 修改 状态 后 需 
要 经 过 一 系列 冒 泡 才 能 达到 顶部 的 组 件 ， 而 且 如 
东 需 要 修改 兄弟 组 件 的 状态 还 需要 共同 的 父 组 件 
再 进行 一 次 广播 。 这 种 方式 无 锋 旦 低 效 而 且 不 易 
维护 的 ， 我 们 也 很 难 去 奶 踩 事件 流 的 走 癌 。 


Vuex 则 提供 了 一 个 集中 式 的 事件 流通 道 ， 类 
似 于 第 6 章 中 提 到 的 在 Vue.js 2.0 中 提供 的 var bus = 
new Vue(0， 统 一 管理 组 件 的 事件 流 。 有 具体 的 流程 
如 图 9-1 所 示 。 


9.2 ”简单 实例 


本 万 将 借用 一 个 价 蛙 的 实例 来 讲述 Vuex 的 基 
础 用 法 ， 并 对 其 中 的 核心 概念 Store 《仓库 ) 、 
State (状态 ) 、Mutations (变更 ) 、Actions ( 动 


作 ) 做 进一步 的 说 明 。 


在 本 例 中 ， 我 们 会 实现 一 个 列表 的 管理 机 
制 ， 主 要 包括 列表 元 素 的 增加 和 删除 。 本 和 代码 
会 采用 ES6 的 语法 进行 说 明 。 


9.2.1 所 需 组 件 


首 移 建立 一 个 根 组 件 ， 路 径 为 
components/App.vue。 该 组 件 包含 两 个 子 组 件 ， 
Side 组 件 用 于 欣 制 列表 元 系 的 增加 和 删除 ， 
Content 组 件 则 用 于 展示 列表 元 系 的 内 容 。 


<template> 
<div id="app"> 
<side></side> 


<content></content> 
</div> 
</template> 


<script> 
import Side from './Side.vue' 
import Content from './Content.vue' 


export default 1{ 
components : { 
Side, 
Content 


} 


</script> 


创建 Side 子 组 件 ，components/Side.vue。 


<template> 
<ul class="side list-unstyled"> 
<1i> 增 加 </1i> 
<1i> 有 删除 </1i> 
</ul> 
</template> 


创建 Content 子 组 件 ， 


COmPponents/Content.Vue。 


<template> 
<div class="content"> 


<div class="item" v-for="item In items"> 
{{ item.content }} 
</div> 
</div> 
</template> 


9.2.2 ”创建 并 注入 store 


传统 方式 下 ， 如 果 需 要 通过 Side 组 件 去 添加 
Content 组 件 中 的 item， 只 能 依赖 于 根 组 件 App 来 进 
行事 件 的 监听 和 广播 ， 这 样 既 增 加 了 耦合 度 ， 也 
使 得 Side 组 件 和 Content 组 件 无 法 独立 复 用 。 

而 在 Yuex 中 ， 我 们 首先 会 增加 Store 这 个 概 
念 ， 用 于 存储 整个 应 用 所 需 的 信息 ， 本 例 中 将 存 
储 元 系 的 列表 。 


首先， 我 们 可 以 用 npm 先 安 壮 Vuex 。 


npm install --save vuex 


建立 一 个 新 文件 vuex/store.js， 代 码 如 下 : 


Import Vue from 'vue' 
import Vuex from 'vuex' 


Vue .use(Vuex) 


// 创建 一 个 对 象 来 保存 应 用 启动 时 的 初始 状态 
const state = { 
items: []， // items 为 元 素 列 表 ， 
name : " // 应 用 名 称 


} 
// 用 于 更 改 状 态 的 mutation 函 数 


const mutations = { 


a 


export default new Vuex.Store({ 
state, 
mutations 


}) 


创建 好 store 后 ， 需 要 将 其 注入 到 我 们 的 应 用 
中 ， 羯 建文 件 app.js， 引 入 Vue,Vuex 及 根 组 件 
App.vue ° 


Import Vue from 'vue' 
import store from './vuex/store,' 
import App from './components/App.vue,' 


new Vuel(t{ 
store, 
el: 'body', 
components: { App } 
}) 


9.2.3 创建 action 及 组 件 调用 方式 


action 能 够 通过 分 发 dispatch) ， 调 用 对 应 的 
mutation 范 数 ， 来 触发 对 store 的 更 狐 。 


我 们 在 相同 目录 下 建 六 vuex/actions.js 。 


export const addItem = ({ dispatch, store }, item) 
二 > 


{ 
dispatch('ADD_ITEM', Item) ; 


export const deleteIltem = ({ dispatch, store}) => 


dispatch('DELETE_ITEM"'); 


action 函 数 也 可 以 通过 异步 请 求 癌 后 端 获 取 数 
， 0 百 册 进行 分 
证 用 由: 


export const getDataFromServer = ({ dispatch, 
store}) => 


{ 
// 这 里 只 是 进行 一 个 说 明 ， 你 需要 目 己 引入 所 需 的 异步 请 求 方 


法 
$.ajax({ 
Url : '/api/data', 
success : function(data) { 
diapatch('FETCH_DATA', data); 
} 
}) 
} 


在 Vuex 中 ， 组 件 不 会 > 
目 刁 的 状态 ， 都 是 通过 action 的 方法 来 进行 分 发 。 
下 面 天 来 修改 componentUSide.vue 文 件 ， 使 之 和 E 调 
用 action 有 的 方法 。 


// 修改 template， 为 增加 、 删 除 两 个 按键 添加 事件 
<ul class="side list-unstyled"> 

<1i @click="addItem({ content : 
Math.random( )})"> 增 加 </1i> 

<1i @click="deleteItem()"> 删 除 </1Li> 
</ul> 
<script> 
import { addItem } from '../vuex/actions' 


export default { 


actions: 1{ 
addItem, 
deleteItenm 


} 


</script> 


由 于 之 前 已 经 注入 了 store， 所 以 在 子 组 件 
中 ， 我 们 多 了 一 个 新 的 选项 vuex。 它 可 以 包含 一 
个 actions 属 性 ， 并 将 actions.js 中 定义 的 方法 赋值 进 
去 ， 同 时 可 以 用 于 事件 绑 定 。 


9.2.4 创建 mutation 


action 分 发 后 惑 由 mutation 来 对 Store 进行 更 
淅 。 需 要 修改 之 前 的 vuex/store.js 文 件 ， 补 全 在 
vuex/actions.js 中 对 应 的 两 种 行为 。 


const mutations = { 
ADD_ITEM (state, item) { 
state.items.push(itenm); 


DELETE ITEM (state) { 
state.items.pop(); 


} 


人 


对 比 actions.js 中 的 方法 和 mutations， 可 以 看 出 
action 在 调动 dispatch 的 时 候 ， 需 要 准确 地 传 入 
action 的 名 称 ， 并 且 需 要 和 mutations 对 象 中 的 属性 
体 持 一 致 。 由 于 动作 名 称 往 往 为 第 量 ， 所 以 我 们 
习惯 用 大 写 的 形式 来 命名 。 在 大 型 项 目 中 ， 也 会 
单独 把 动作 名 称 集 合 抽象 成 一 个 模块 ， 单 独 管 
理 ， 例 如 抽象 成 vuex/mutation-type.js。 


export default { 
ADD_ITEM : ' ADD _ITEM '， 
DELETE_ITEM : DELETE _ITEM 


vueX/actions.js 即 可 修改 为 : 


Import { ADD_ITEM } from './mutation-type.js' 


export const addiItem = ({ dispatch, store }, item) 
=> { 
dispatch(ADD_ITEM, item); 


vuex/store.js 中 的 mutations 可 修改 为 : 


import { ADD_ITEM } from './mutation-type.js' 


const mutations = { 
[ADD_ITEM](state， item) { 


9.2.5 ”组 件 获取 state 


组 件 中 的 vuex 迁 项 除了 actions 属 性 外 ， 还 有 一 
个 getters 属 性 ， 里 面 可 以 定义 函数 ， 接 受 的 参 效 即 
为 vuex/store.js 中 定义 的 state 对 象 。 


修改 components/Content.vue 如 下 : 


export default { 
vuex: 1{ 
getters: { 
// 这 里 采用 的 ES6 的 写法 ， 你 可 以 苦 换 成 
// items : function(state) { return 
state.items } 
items: State => state.items 


这 样 我 们 和 在 这 个 组 件 实例 中 整 获得 了 state 中 
Hitems 数 组 ， 在 template 中 束 可 以 直接 使 用 <li v- 
for=“item in items”></l 谊 来 裔 历数 据 。 


除了 在 组 件 中 直接 声明 getters 函 数 外 ， 也 可 以 
将 其 抽象 成 一 个 模块 。 例 如 ， 狐 建 一 个 


vuex/getters.]s: 


export function getIitems(state) { 


} 


return state,.items,; 


components/Content.vue 即 可 修改 成 : 


import { getItems } from '../vuex/getters'; 
export default { 
vuex: { 
getters: { 
items: getItems 


| 


getters 的 使 用 并 不 是 强制 规定 ， 只 是 一 种 最 佳 
实践 。 特 别 是 对 于 大 型 应 用 来 说 ， 很 多 组 件 可 以 
共用 getters 方 法 ， 这 样 state 中 的 值 如 果 发 生 了 变 
化 ， 也 只 需要 修改 一 个 getter 方 法 即 可 ， 而 不 用 修 
改 所 涉及 的 所 有 组 件 。 


小 结 


以 上 就 是 vuex 所 涉及 的 所 有 对 象 及 使 用 广 
法 ， 最 终结 果 为 ， 


增加 0.6732773172110129 
删除 


0.5368967656957893 


0.7304434973765515 


单 击 “ 增 加 ? 即 可 狐 增 一 行 随机 数 ， 单 击 “ 删 
除 ? 则 去 除数 组 最 后 一 个 随机 数 。 我 们 可 以 从 用 户 
使 用 的 角度 来 总 结 一 下 整体 的 流程 。 


1) 操作 组 件 : 单 击 组 件 按钮 ， 调 用 组 件 中 获 
取 的 action 函 数 。 


2) action dispatch: action 函 数 不 会 直接 对 
store 数 据 进 行 修 改 ， 而 是 通过 dispatch 的 方式 通知 
到 对 应 的 mutation 。 


3) mutation: mnutation 函 数 则 包含 了 对 store 数 
据 的 具体 修改 内 容 。 


4) store/state: store 是 包含 当前 state 的 单一 对 


象 ， 数 据 更 新 后 ， 目 动 通知 到 getter 函 数 。 


5) getter: getter 函 数 从 store 获 取 组 件 所 需 的 
数据 。 


6) 组 件 展示 : 组 件 中 使 用 getter 函 数 ， 获 取 新 
的 数据 ， 进 行 展示 。 


上 述 例 子 只 是 为 了 展示 vuex 的 基础 用 法 ， 实 
际 开发 中 我 们 不 会 为 了 维护 一 个 数组 而 采取 这 人 么 
多 步骤 。 在 第 7.4 世 中 ， 我 们 会 在 这 个 例子 的 基础 
上 进行 修改 ， 开 发 一 个 人 简易 的 HTML5 页 面 编辑 


口 量 


ED 


9.3 ”严格 模式 


Vuex.store 具 有 严格 模式 ， 即 当 Vuex State 在 
mutation 范 数 之 外 的 情况 下 被 修改 时 ， 即 会 抛 出 应 
误 。 我 们 可 以 在 创建 实例 时 传 入 strict:true 参 数 ， 

即 可 开局 严格 模式 \: 


const store = new Vuex.Storel({ 
//.... 
strict : true 


}) 


需要 注意 的 是 ， 不 要 在 生产 环境 中 开启 严格 
模式 。 严 格 模 式 会 对 state 树 进行 一 个 深入 观 容 ， 
人 员 耗 ， 所 以 可 以 将 上 述 例 子 修 
改 国 : 


const store = new Vuex.Store(t{ 
/ses 
strict : process.env.NODE_ ENV !== 'production' 


}) 


9.4 ”中 间 件 


Vuex store 接 受 middlewars 选 项 来 加 和 载 中 间 
件 ， 例 如 : 


const store = new Vuex.Storel(t{ 
//.... 
middlewares : [myMiddleware]| 


}) 


myMiddleware 是 一 个 对 象 ， 可 以 包含 设 定 好 
的 钩子 函数 ， 例 如 ; 


const myMiddleware = { 
onInit(state) { 


// 在 初始 化 的 时 候 被 调用， 可 以 记录 初始 state 
console.1log(state); 

}, 

onMutation(mutation, state) { 
// 每 个 mutation 之 后 都 会 调用 
// 每 个 mutation 参 数 格式 为 { type,， payload} 
console.log(mutation, state); 

} 

} 


和 


我 们 可 以 在 第 9.2 节 的 例子 中 加 一 个 中 间 件 ， 
并 进行 增加 和 删除 操作 ， 观 察 输 出 的 结 来 为 : 


0 type: "ADD_ITEM", payload: Array([1]} 


bp Object 

= Object b__: Observer} 

bp Objec type: "DELETE_ITEM", payload: Array[8]} 
Objec Observer} 


payload 即 为 mutations 定 义 的 ADD_ITEM 
(state，item) 中 除了 state 外 的 后 面 所 有 参数 的 数 
组 。 


9.4.1 快照 


可 以 在 中 间 件 内 设置 获取 state 的 快照 ， 用 来 
比较 mutation 执 行 前 后 的 state。 只 需 在 设置 中 间 件 
对 象 的 时 候 新 增 snapshot 先 项 及 onMnutation 钓 子 函 
RY o 


const mySnap = { 
snapshot: true, 
onMutation (mutation, nextState, prevState) { 
// nextState 和 prevState 分 别 为 nutation 触 发 前 和 触发 
后 对 原 state 对 象 的 深 找 由 


同 产 格 模式 一 样 ， 快 照 模 式 也 建议 只 在 开发 
模式 下 使 用 ， 处 理 方式 与 严格 模式 类 似 : 


const store = new Vuex.store({ 

A 

middlewares : process.env.NODE_ ENV !== 
'production' ? [mySnap] : [] 


}) 


9.4.2 logger 


为 了 方便 调 孔 和 观察 数据 变化 ，Vuex 目 市 了 
一 个 logger 中 间 件 ， 使 用 方法 如 下 : 


// 使 用 的 vuex 版 本 是 0 . 82 


import createLogger from 'vuex/logger'; 


const store = new Vuex.Store({ 
middlewares : [createLogger()] 


}) 


在 调用 action 后 ， 我 们 可 以 在 控制 台 看 到 
logger 中 间 件 输出 的 内 容 ， 记 录 了 mutation 的 type 
和 调用 时 间 ， 以 及 state 的 变化 过 程 : 


Y mutation ADD_ ITEN @ 20:32:42.432 build.1is:29372 

= Object {items: Array[8]} build.is:20377 
Utation build.1i15:280378 
> Object {type: "ADD_ITEM", payload: Array[1]} 


next state yp Object {items: Array[1]} 


createLogger 有 以 下 几 个 选项 可 供 配 置 。 


1) collapsed: 默认 为 true， 用 于 是 否 目 动 展 
开 输 出 的 mutations 。 


2) transformer: 类 型 为 画 数 ， 接 受 state 为 参 
数 ， 用 于 限定 在 控制 台 输 出 的 部 分 state。 由 于 在 
大 型 应 用 中 state 通 常会 比较 复 林 ， 如 果 都 直接 输 
出 到 控制 台 会 显得 比较 杂乱 ， 所 以 可 以 用 


transformer 进 行 控 制 。 


3) mutationTransformer: 类 型 为 函数 ， 接 受 
mnutation 为 参数 ， 返 回信 即 为 控制 台中 输出 的 
mutation。 默 认为 {type: “, payload : “}， 我 们 也 
可 以 通过 设 定 其 返回 值 ， 来 对 控制 台 的 输出 进行 
目 定 义 。 例 如 ， 我 们 可 以 设置 返回 值 为 return 
mautation.type， 这 样 在 控制 台中 仅 会 输出 
mutation.type 有 的 值 ， 而 不 输出 mutation.payload 


createLogger 使 用 远 项 的 具体 示例 如 下 : 


import createLogger from 'vuex/logger'; 


const logger = createLogger({ 
collapsed: false, 
transformer (state) { 
return state.items 


[A 
mutationTransformer (mutation) { 
return mutation.type 


} 


}) 


const store = new Vuex.Store({ 


middlewares : [Logger] 


}) 


9.5 “表单 处 理 


在 Vuex 的 模式 下 ， 组 件 中 的 表单 处 理会 稍 显 
不 同 ， 因为 表单 “天然 "的 作用 网 征 且 接 修改 组 件 
内 状态 ， 这 和 Vuex action ~ mutation 一 state 的 修 
改 方式 显然 并 不 符合 。 特 别 是 在 严格 模式 下 。 我 
们 将 第 9.2 廊 中 的 a nn ks : 


<template> 
<div class="content"> 
<div class="item" v-for="item In items"> 
<input type="text" v-model="item,.content" /> 
</div> 


</div> 


</template> 


在 用 户 输 入 时 ， 束 相当 于 直接 修改 state 状 
人 态 。 而 由 于 这 个 修改 并 不 古 在 mutation 中 执行 的 ， 
此 时 vuex 就 会 抛 出 一 个 警告 


[27 [Vue warn]: Error when evaluating setter "item.content": Error: [vuex] 
Do not mutate vuex store state outside mutation handlers. “hind in component: <content>) 


> 


为 了 避免 这 种 情况 ， 也 为 了 能 够 更 好 地 跟踪 
state 状 态 ， 我 们 会 把 表单 元 素 绑 定 state 的 信 ， 并 在 
change 或 者 blur 事 件 中 监听 action 行 为 ， 不 推荐 使 
用 input， 这 样 每 次 输入 都 会 触发 action， 对 性 能 滑 
耗 较 大 。 例 如 : 


<input :value="item,.content" 
@change="updateContent ($index, 
$event.target.value)" > 

// components/content.vue 的 js 修改 为 : 

import { updateContent } from '../vuex/actions' 


export default { 
vuex: { 
getters: { 
items: state => state.items 
于 
actions: { 
updateContent 
} 
} 


// vuex/actions .js 中 增加 updateContent 方 法 
export const updateContent = ({ dispatch }, index, 
value) => { 

dispatch('UPDATE_ CONTENT', index, value) 


} 
// vuex/store, js 中 增加 mutations 的 UPDATE_CONTENT 属 


const mutations = { 
A/ aia 
UPDATE_CONTENT(state, index, value) { 
// 需要 注意 的 是 ， 我 们 在 本 例 中 修改 的 是 items 数 组 对 象 中 
content 的 值 


// 如 果 直 接 写 成 state.items[index] .content = 
value，vue 是 无 法 监听 到 数值 变化 的 

// 也 就 无 法 更 新 视图 上 的 content 值 ， 所 以 此 处 用 $set 方 式 
更 新 数据 


state.items.$set(index, { content : Value }); 


}; 


当然 ， 如 果 你 觉得 没有 儿 要 跟踪 item.content 
的 值 ， 也 可 以 不 将 此 内 容 放 入 Vuex 中 ， 完 全 当做 
组 件 的 本 地 状态 。 一 般 和 其 他 组 件 不 产生 影响 的 
状态 束 可 以 这 么 处 理 。 


此 外 ， 如 果 和 希 望 使 用 状态 管理 ， 又 想 继续 使 
用 v-model， 则 可 以 通过 Vue.js 的 计算 属性 来 实 
更 : 


// 修改 components/content.vue 
<div class="content"> 
<input type="text" v-model="appName"> 


</div> 
import { updateContent, updateName } from 
',./vUuex/actions' 
export default { 
vuex: { 
getters: { 


name : State => state.name 


actions: { 
A 
updateName 


} 

}, 

computed: { 
appName: { 


get() 【 


return this.name; 


}, 
set(val) { 
this.updateName(val); 


// 修改 vuex/actions .js 
export const updateName = ({ dispatch }, name) => 


dispatch('UPDATE_NAME', name); 


// 修改 vuex/store.js 
const mutations = { 
BS 
UPDATE_NAME(state, value) { 
state.name = value; 
} 
}; 


我 们 在 input 中 输入 内 容 的 时 候 殉 进 1 


丁 下 State 


的 更 新 ， 从 logger 中 可 以 看 到 : 


Y mutation UPDATE_NAME @ 10:16:45.793 


= Object {items: Array[8], 
mutation UPDATE_NAME 


next state y Object {items: Array[8], 
> Object {fitems: Array[8], name: "12"} 
= Object fitems: Array[8], name: "1"} 
mutation UPDATE NAME @ 10:16:46.466 
= Object {items: Array[8], 
mutation UPDATE_ NAME 
next state y Object fitems: Array[8], 
Pp Object {items: Array[0@], name: "123"} 
> Object fitems: Array[8], name: "12"} 
mutation UPDATE NAME @ 10:16:46.781 
e Object {items: Array[8], 
utation UPDATE_NAME 
next state > Object {items: Array[8], 
bp Object fitems: Array{[8], name: "1234"} 
> Object fitems: Array[8@], name: "123"} 
mutation UPDATE_ NAME @ 10:16:47.365 
pObject {items: Array[8], 
mutation UPDATE NAME 


next state > 0bject {items: Array[8], 


这 样 既 能 使 用 v-model， 


跟踪 。 如 果 饮 在 


Name: 


Name.: 


name : 


nmame : 


name 


name : 


name 


name 


机 生计 


We ds 


eb hs 


sya} 


ep 


“jag 


i 


"1234"} 


buitd.js:19989 
buitd.ijs:19094 


build.1is:19095 
build.1is:19096 


build.1is:19077 


build.is:19089 
build.1is:19094 


build.1is:190695 
build.is:19096 


build.1is:19077 


build.1is:19889 
build.1is:19094 


build.1is:190695 
build.1is:19096 


build.1is:19077 


build.is:19889 
buitd.ijs:19994 
build.1is:19895 
build.1is:19096 


又 对 state 状 仿 进 行 了 


叶 每 次 input 事 件 都 调用 action 会 引起 


性 能 损耗 的 话 ， 也 可 以 使 用 v-model 本 吴 的 lazy 修 


饰 符 来 降低 调用 频率 。 
9.6 目录 结构 


本 广 会 介绍 在 实际 项 目 中 如 何 组 织 文 件 ， 以 
及 用 一 个 实例 来 展示 Vuex 试 用 的 场景 。 由 于 Vuex 
的 actions 和 mutatiotg 本 身 都 只 是 一 些 画 数 ， 对 存放 
位 置 并 没有 严格 的 要 求 ， 所 以 按照 一 定 的 规则 来 
放置 对 熟悉 其 他 vuex 项 目 会 非常 有 帮助 。 


9.6.1 简单 项 目 
s 在 第 9.2 太 的 例子 中 ， 我 们 可 以 这 样 组织 目 


| 一 components 
| | App.vue 
ss 
— vuex 
一 store.js // store 中 包含 了 state 和 mutations 
对 象 
| 一 actions ,js 


| 一 index.html 


| 一 app.js 


如 有 果 你 的 state 和 mutations 内 容 偏 多 ， 也 可 以 拆 
成 独立 的 两 个 文件 : 


一 VUex 
| 一 index.js // Store 中 包含 了 state 和 mutations 
对 象 
一 mutations .js 
| 一 actions ,js 


9.6.2 ”大 型 项 目 


在 大 型 项 目 中 ， 可 以 把 相对 独立 的 state 分 割 
成 单独 的 模块 ， 每 个 模块 只 修改 目 且 的 state 状 
念 。 而 对 应 的 子 模块 文件 中 包含 对 应 的 state 和 
mutations。 并 且 action 的 类 型 也 可 以 单独 集合 成 一 
个 文件 mutation-types.js， 避 人 免 mutations 和 actions 中 


各 目 使 用 字 竺 串 常 量 ， 使 得 维护 和 修改 更 方便 。 
大 型 项 目 结构 如 下 : 


上 一 api 

| 一 后 端 数据 交互 接口 
| 一 components 
| | App.vue 

CL | 
——— vuex 

actions.js // store 中 包含 了 state 和 

mutations 对 象 


| 一 store.js 
一 mutation-types,js 
F 一 modules 
| 一 moduleA.js 
| 一 moduleB.js 
| 一 index.html 


| 一 app .js 


以 vuex/modules/moduleA.js 为 例 : 


import { ACTION A } from './../mutation-type' 


const State = { 
rootA : { 


} 


const mutations = { 
[ACTION_A](state， param) 
// 了 于 模块 中 mutations 的 参数 state 值 即 为 模块 内 设 定 的 
state， 无 法 获取 其 他 模块 的 state 状 态 
// 子 模块 的 state 根 世 点 不 能 在 模块 内 部 改写 ， 即 state = 
{ …，} 这 样 的 写法 是 无 效 的 
// 只 能 用 以 下 的 写法 修改 状态 
State,rootA = ..... 
} 
} 


export default f 


state, 
mutations 


vuex/store.js 中 集合 多 个 模块 示例 : 


import Vue from 'vue'; 

import Vuex from 'vuex'; 

import ModuleA from './modules/moduleA'; 
import ModuleB from './modules/moduleB'; 
Vue .use(vuex); 


export default new Vuex.store({ 
modules : { 


moduleA, 
moduleB 


此 时 整体 的 state 值 束 变 成 了 : 


}, 
module b :; { 


} 


从 上 面 这 个 例子 可 以 看 出 ， 我 们 已 把 每 个 模 
块 的 state 和 mutations 合 并 在 一 个 文件 中 ， 而 
actions.js 仍 统一 放置 在 vuex 目 杂 下 。 这 古 因 为 
action 可 能 会 触发 多 个 模块 的 mutations。 例 如 在 
vuex/actions.js 中 ， 可 以 写成 如 下 : 


import * as actions from './mutation-types'; 
export const updateModuleA = ({ dispatch }, param) 
二 > 
dispatch(actions.MODULE A, param); 
dispatch(actions.MODULE_ B, param); 


} 


此 时 ， 这 个 action 行 为 就 触发 了 两 个 分 属 不 辣 
模块 的 mutations， 修 改 了 两 次 state。 如 果 我 们 加 入 
了 logger 的 中 间 件 ， 束 可 以 看 到 控制 台中 输出 了 : 


Y mutation MODULE A @ 84:49:58.262 build.is:19866 


bp Object {module a: Object, module b: Object} build.is:19071 
mutation * Object {type: "MODULE_A", payload: Array[1]} build.1s:19072 
next state > Object {module_ a: Object, module _b: Object} build.is:19073 
boObject {_ob__: Observer } build.1is:19457 
bp object {module a: Object, module b: Object} build.1s:19034 
> Object {module a: Object, module b: Object} 
v mutation MODULE B @ 64:49:58.267 build.is:199066 
bp Object {module a: Object, module b: Object} build.]s:19071 
mutation y Object {type: "MODULE_B", payload: Array[1]} build.is:19072 
next state bp Object {module a: Object, module_b: Object} build.is:19873 


9.7 ”实例 


本 太 会 利用 vuex 制 作 一 个 向 单 的 h5 页 面 排版 
工具 ， 我 们 预 设 了 一 些 文字 和 图 片 排 版 样式 的 组 
件 ， 用 户 可 以 目 主 选择 需要 的 组 件 并 输入 内 容 进 
行 何 香 的 排版 。 


最 终 的 使 用 界面 如 独 9-2 所 示 。 


请 输入 内 容 


图 9-2 


整个 项 目 会 采取 ES6 的 写法 ， 采 用 webpack 作 
为 编译 工具 ， 并 使 用 vue-loader 来 处 理 *.vue 文 件 ， 
整体 日 如 结构 如 下 : 


一 base // 该 目录 下 包含 了 所 有 文字 和 图 厂 排 版 样式 组 件 
> Image.vue 
Text .vue 


App.vue 
Content.vue // 编辑 区 域 组 件 
[一 Side.vue // 侧 边栏 组 件 ， 用 于 添加 组 件 
-一 Toolbar.vue // base 组 件 控制 器 ， 用 于 改变 排序 和 删 
除 


| 一 utils 

| 一 factory,js // base 组 件 的 工厂 画 数 
[一 vuex // 本 例 只 是 一 个 简单 的 demo， 并 没有 采取 分 成 子 模块 
的 方式 


store.js 
actions.]js 


| 一 index.html 
[一 app.js 


9.7.1 _ state 结构 


由 于 Vue.js 本 号 的 特点 束 是 数据 驱动 贫 图 ， 所 
以 一 开始 就 会 先 设 定 好 state 的 结构 及 mutations 方 
法 。vuex/store.js 代 人 码 如 下 : 


import Vue from 'vue' 

import Vuex from 'vuex' 

import createLogger from 'vuex/logger' 

import createElement from './../utils/factory.js' 


Vue .use(Vuex) 


const state = { 
items: []， // 用 于 存储 base 组 件数 据 结构 的 数组 
isPreview : false // 当前 形式 为 可 编辑 或 预览 状态 
} 


const mutations = { 
ADD_ITEM (state, type) { 
state.items.push(createElement(type)); // 利用 
工厂 模式 增加 base 组 件 
}, 


DELETE_ITEM (state,，index) { // 删除 base 组 件 


state.items.splice(index, 1); 


}, 


SORT_ITEM(state,，index，newIndex) { // 改变 base 
组 件 排 序 
var origin = state.items,.splice(index, 1)[0] 
state.items.splice(newIndex, 0, origin); 


}, 


UPDATE_ITEM(state,，index，key， value) { // 更 新 
base 组 件 内 容 
var origin = state.items[index]; 
origin[key|] = value.; 
state.items.$set(index, origin); 


}, 


TOGGLE_PREVIEW(state) { 
state.isPreview = !state.isPreview; // 切 换 当 前 
预览 /编辑 模式 
} 


}3 


export default new Vuex.Store({ 
state, 
mutations, 
middlewares : [createLogger({ 
collapsed : false, 
})] 
}) 


utils/factory.js 用 于 生成 base 组 件 的 数据 类 型 ， 
代码 如 下 : 


function createElement(type) { 
switch(type) { 
case 'text' : // base/Text .vue 组 件 的 数据 结构 
return { 
type, 
content : ' 请 输入 内 容 ' 


} 
case 'eleImage' : // base/Image.vue 组 件 的 数据 


结构 
return 1{ 
type, 
Url] : " 
} 
case ‘'mix' 
return { 
type, 
Url : ", 
content : 
} 
} 


export default createElement; 


9.7.2 actions.]Js 


该 示例 中 的 actions.js 较 为 商 单 ， 特 时 不 涉及 后 
问 数 据 交 互 ， 确 认 好 所 需 的 参数 和 dispatch 调 用 的 
方法 即 可 。vuex/actions.js 代 码 如 下 : 


// 新 增 列表 元 素 
export const addItem = ({ dispatch }, type) => { 
dispatch('ADD_ITEM', type) 


} 
// 删除 列表 元 素 


export const deleteIltem = ({ dispatch }, index) => 
dispatch('DELETE_ ITEM', index) 


} 
// 对 列表 元 素 进 行 排序 
export const SortItem = ({ dispatch }, index, 
newIndex) => { 
dispatch('SORT_ITEM', index, newIndex) 


} 
// 更 新 列表 元 素 内 容 
export const updateItem = ({ dispatch }, index, 
attr, value) => { 
dispatch('UPDATE_ITEM', index, attr, value) 


} 

// 切换 当前 模式 

export const togglePreview = ({ dispatch }) => { 
dispatch('TOGGLE_PREVIEW' ) ; 


9.7.3 ”app.js 


此 例 中 的 app.js 较 为 简单 ， 仪 仅 是 引入 了 store 
I 设置 了 根 元 于 和 包含 的 根 组 件 。app.js 代 人 码 
[下 : 


Import Vue from 'vue' 
Import store from "./Vuex/Sstore， 
import App from './components/App.vue,' 


new Vue({ 
store, 
el: 'body', 
components: { App } 
}) 


9.7.4 组 件 结构 
示例 中 整体 包含 4 个 功能 组 件 如 下 : 
@ App.vue: 整个 应 用 的 根 组 件 。 


@ Side.vue: 侧 边 栏 组 件 ， 用 于 增加 base 组 件 
及 预 贞 /编辑 模式 的 切换 。 


@ Content.vue: base 组 件 列表 。 
@ Toolbarvue: base 组 件 的 工具 栏 。 


components/App.vue 代 人 码 如 下 : 


<template> 
<div id="app"> 
<side></side> 
<content></content> 
</div> 
</template> 


<script> 
import Side from './Side.vue' 
import Content from './Content.vue' 
export default { 


components : { 
Side, 
Content 
} 
} 


</script> 


components/Side.vue 代 人 码 如 下 : 


<template> 


<div class="side"> 
<button class="toggle" 
@click="togglePreview()"> 
<template v-if="isPreview"> 编 辑 </template> 
<template V-else> 预 览 </temp1Late> 
</button> 
<ul class="1list-unstyled" v-show="!isPreview"> 
<li @click="addItem('text')"> 文 字 </1i> 
<1i @click="addItem('eleImage' )"> 图 片 </1i> 
<li @click="addItem('mix' )"> 图 文 </1i> 
</ul> 
</div> 
</template> 


<script> 
import { addIitem, togglePreview } fronm 
',./vuex/actions' 


export default { 


}, 


vuex: { 
getters : { 
ijsPreview: State => state.isPreview 


}, 


actions: { 
addItem, // 添加 base 组 件 
togglePreview  // 切换 state.isPreview 状 态 


} 


</script> 


| 


components/Content.vue 代 码 如 下 : 


<template> 
<div class="content"> 
<div class="item" V-for=" Item In items"> 


<toolbar v-if="!isPpreview" :item="item" 
:item-index="$index"></toolbar> 
< 1! 一 
此 处 用 了 一 个 动态 组 件 ， 即 根据 item.type 去 加 载 对 应 
的 base 组 件 
需要 注意 的 是 item.type 的 值 需 要 和 components 选 项 
中 的 属性 对 应 起 来 
例如 : item,type 为 text，components 中 的 属性 为 
Text 
= 之 
<Components :is="item.type" :item="item" 
:item-index="$index"></components> 
</div> 
</div> 
</template> 


<script> 
import Text from './../base/Text.vue'; 
import EleImage from './../base/Image.vue'; 
import Mix from './../base/Mix.vue'; 
import Toolbar from './Toolbar.vue'; 


export default f{ 
components : { 
Text 
; EleImage 


MIX 
; Toolbar 


vuex: { 
getters: { 
Items: state => state.items, 
isPreview : State => state.isPpreview 


} 
} 


</script> 


components/Toolbar.vue 代 码 如 下 : 


<template> 
<ul class="item-controls"> 
<]i> 
<!- 组 件 上 移 一 位 ， 在 首位 的 时 候 不 显示 这 个 图 标 - -> 
<i VvV-if="itemIndex != 0" 
@click="sortIitem(itemIndex, itemIndex - 1)" 
class="glyphicon glyphicon-chevron-up"> 
</ 工 > 
</1i> 
<]i> 
<! 一 删除 这 个 组 件 - -> 
<i @click="deleteItem(itemIndex)" 
class="glyphicon glyphicon-remove"> </i> 
</1i> 
<]i> 


<! 一 组 件 下 移 一 位 ， 在 末 位 的 时 候 不 显示 这 个 图 标 - -> 


<i Vv-if="itemIndex != items.length - 1" 
@click="sortIitem(itemIndex, itemIndex + 1)" 
class="glyphicon glyphicon-chevron-down"> 
</ 工 > 
</1i> 
</ul> 
</template> 


<script> 
import { deleteItem, sortIitem } from 
'../vuex/actions' 


export default { 
props : ['item', 'itemIndex'], 


vuex: { 
getters: { 
items: state => state,.items 
J 
actions: { 
deleteItem, 
sortItenm 
} 
} 
</script> 


9.7.5 ”base 组件 


base 组 件 即 是 可 供 排版 的 组 件 ， 这 个 组 件 主 要 
对 应 state 中 items 效 组 中 的 单个 item。 每 个 组 件 所 供 
了 一 定 的 样式 和 可 供 修改 的 内 容 。 我 们 以 Text.vue 
和 Image.vue 两 个 组 件 来 进行 说 明 。 


base/Text .vue 
<template> 
<div class="text-wrap"> 
<!- 组 件 提 供 两 种 模式 ， 非 预览 模式 下 才 可 以 进行 编辑 - -> 
<div v-if="!isPreview"> 
<!— 
此 处 的 textarea 没 有 绑 定 v-mode1， 而 是 在 bLur 的 时 
候 触 发 了 actions. updateItem ， 
以 此 来 修改 state 的 状态 
- -> 
<textarea :value="item,.content" 
@blur="update" class="form-control"></textarea> 
</div> 
<! 一 预览 模式 ， 仅 可 见 内 容 ， 无 法 进行 修改 --> 
<div v-else class="preview"> 
{{ item.content }} 
</div> 
<div class="split"></div> 
</div> 
</template> 


<script> 
import { updateItem } from '../vuex/actions' 


export default 1{ 
props : ['itemIndex', 'Item']， 
vuex: { 
getters : { 
isPreview : state => state,.isPreview 


}, 


actions: { 
updateItem 
} 


}, 
methods : { 


update(e) { 
this.updateItem(this.itemIndex, 'content', 
e.target.value); 


} 
} 
} 
</script> 
base/Image.vue 
<template> 
<div> 
<! 一 此 处 和 Text . vue 一样， 也 是 通过 state .isPreview 的 值 
来 控制 是 否 为 预 虎 模式 - -> 
<div v-if="!isPreview"> 
<input v-el:file v-if="!item.url" 
@change="upload" class="form-control" type="file"> 
<img v-if="item.url" :src="item.url"> 
</div> 
<div v-else> 
<img v-if="item.url" :src="item.url"> 
</div> 
</div> 
</template> 


<script> 
import { updateItem } from '../vuex/actions' 


export default 1{ 
props : ['itemIndex', 'item'], 
vuex: { 
getters : { 
isPreview : state => state.isPreview 


}, 


actions: { 
updateItem 


methods : { 
upload(e) { 
Var fileElement = this.s$els,.file; 
var file = fileElement.files[0]; 
// 获取 input 上 传 的 文件 ， 由 于 此 实例 不 和 后 端 交互 ， 
// 所 以 直接 获取 文件 在 该 document 中 的 ur1 路 径 ， 进 行 


展示 
var blobURL = 
window.webkitURL.createObjectURL(file); 
this.updateItem(this.itemIndex, 'url', 
blobURL ); 
} 


} 


</script> 


9.7.6 ”展示 结果 


最 终 运行 代码 结 来 如 图 9-3 所 示 。 


请 输入 内 容 


Choose File | No file chosen 


图 9-3 


用 户 可 以 在 侧 边 栏 中 添加 任意 组 件 ， 并 在 右 
侧 修改 其 内 容 或 进行 排序 ， 也 可 以 切换 预览 状 
仿 ， 对 最 终 鸡 果 进 行 查看 ， 如 图 9-4 所 示 。 


请 输入 内 容 


This is Vue.js 


展示 和 展示 如 辑 业务 么 辑 和 数据 


图 9-4 


对 于 编辑 的 结果 ， 我 们 可 以 将 state 中 的 数据 
保存 到 后 端 ， 并 新 建 一 个 类 似 于 preview.vue 这 样 
的 组 件 ， 只 展示 “items 的 预 多 模式 ， 这 样 束 可 以 供 
普通 用 户 进行 访问 和 查看 ° 我 们 也 可 以 利用 类 似 
于 html2canvas 的 框架 ， 将 当前 页 面 内 容 你 存 成 图 
片 ， 这 样 也 束 省 去 了 部 分 开发 页 面 的 工作 量 。 


9.8 ”Vue.js 2.0 的 变化 


同 Vue-router 一 样 ， 随 着 Vue.js 2.0 的 更 新 ， 
Vuex 也 推出 了 新 的 2.0 版 本 。 其 中 ，Vuex 主 要 在 语 
法 层面 、 模 块 移植 和 组 合 以 及 配合 Vue.js 2.0 的 新 
特性 服务 闪 泻 染 方 面 进行 了 修改 ， 所 以 组 件 调用 
Vuex 的 方式 发 生 了 比较 大 的 变化 ， 本 和 主要 从 使 
用 方法 上 对 2.0 进 行 部 分 说 明 。 


9.8.1 State 


Vuex 2.0 中 废除 了 组 件 中 的 vuex 计 项 ， 组 件 本 
刁 承 可 以 通过 this.$store.state 的 方式 获取 数据 ， 考 
虑 到 state 中 的 数据 是 时 第 更 新 的 ， 官 方 推荐 在 计 
算 属 性 中 设 定 获 取 state 数 据 ， 例 如 : 


const Content = { 
template: '<div class="item" v-for="item in 
items">{{ item }}</div>', 
computed: { 
items () 
return this.$store.state.items 


而 当 一 个 组 件 中 需要 获取 state 内 多 种 属性 
时 ，Vuex 提 供 了 一 个 mapState 的 帮助 男 数 ， 可 以 
简化 上 壕 的 写法 : 


import { mapState } from 'vuex' 


export default { 
J 
computed: mapState(t{ 
items: state => state.items, 
// 可 以 直接 赋值 字符 串 ， 等 价 于 state => state.items 
itemsAlias: 'items', 
// 函数 内 可 调用 组 件 实例 this， 可 以 对 state 的 数据 加 上 组 
件 内 部 的 处 理 
localItems (state) { 
return state.items.push(this.1localIitems) 
} 
}) 


} 


mapState 除 了 接受 对 象 参 数 之 外 ， 也 接 党 数组 
参数 ， 相 当 于 直接 获取 state 中 的 多 个 属性 ， 日 在 
当前 组 件 内 state 属 性 按 原 名 调用 ， 例 如 : 


computed: mapState([ 
// 组 件 实例 this,count 即 为 Store.Sstate,count 


"COUnt 


尺 外 ， 当 组 件 内 本 号 吏 侣 有 计算 属性 时 ， 我 
们 可 以 通过 ... 扩 展 运 算 符 来 进行 书写 ， 这 样 代码 
看 上 去 更 人 向 涪 ， 例 如 : 


computed: 
localComputed () {/* ... */ }, 
.. .MapState({ 
items: State => state.items 
}) 


} 


.mapState ({}) 会 将 目 身 内 部 的 属性 添加 到 
新 的 对 象 中 ， 即 最 后 computed 接 收 到 的 对 象 为 { 


localComputed : function(){...}, items : function() 


人 


9.8.2 Getters 


Vuex 2.0 中 将 原先 游离 于 外 部 的 Getters 模 块 包 
舍 了 进来 ， 我 们 在 声明 一 个 Vuex.Store() 实例 的 时 
候 可 以 直接 传 入 getters 对 象 ， 对 象 属性 为 可 接受 
state 参 数 的 函数 ， 例 如 : 


const store = new Vuex.Storel({ 
state: { 
items: [ 
{ id: 1, type: 'text' }, 
{ id: 2, type: 'image' } 
] 
}, 
getters: { 
getTexts: state => { 


return state.items.filter(item => item.type 
== 'text') 


我 们 在 组 件 内 束 可 以 通过 
this.$store.getters.getTexts 直 接 获 取 呈 选 后 的 数据 ， 
同 state 类 似 ，Vuex 也 双 露 了 mapGetters 函 效 帮 助 我 
们 获取 getters 方 法 ， 例 如 : 


Import { mapGetters } from 'vuex' 


export default { 
// ... 
computed: { 
.. .mapGetters([ 
'getTexts' 
// ... 


9.8.3 Mutations 


Mnutations 的 触发 方式 发 生 了 变化 ， 取 请 了 原 
先 的 dispatch 接 口 ， 而 替换 成 了 store.commit (type, 
data) 的 方式 进行 触发 。 声 明 的 方式 没有 发 生变 
化 ， 依 旧 是 实例 化 Vuex.Store 的 时 候 传 入 mutations 
对 和 象 ， 例 如 : 


const store = new Vuex.Store({ 


mutations: { 
add (state, item) { 


state.items.push(item); 


与 Vue.js 1.0 不 同 的 是 ，Vue.js 2.0 中 并 不 再 强 
制 组件 内 必须 使 用 actions 的 函数 并 dispatch 后 才能 
间接 调用 mutations， 而 是 组 件 内 可 以 直接 调用 
mutations 方 法 ， 即 this.$store.commit(add', item)， 
或 者 只 传递 一 个 选项 参数 ， 包 含 type 属 性 即 可 ， 例 
ulthis.$store.commit({ type : 'add', item : item })° 从 
某 种 程度 上 说 ， 人 简化 了 对 state 更 新 的 流程 。 但 需 
要 注意 的 是 ，mutations 中 的 操作 只 能 为 同步 操 
作 ， 如 果 需 要 获取 异步 数据 ， 则 必须 使 用 actions 
来 进行 处 理 。 


同样 ， 我 们 也 可 以 使 用 Vuex 的 mapMutations 
方法 来 簿 化 调用 方式 : 


Import { mapMutations } from 'vuex' 


export default { 
A a 
methods: { 
.. .MapMutations({ 


add 


9.8.4 Actions 


| 同 Getters 类 似 ，Actions 在 Vue.js 2.0 中 也 归 入 
到 了 Vuex.Store 选 项 中 ， 我 们 在 实例 化 的 时 候 也 需 
要 传 入 actions 参 数 ， 例 如 : 


const store = new Vuex.Store(t{ 
state: { 
items: [] 


[A 
mutations: { 
add (state, item) { 
state.items.push(item) 
} 
}, 


actions: { 
add (context) { 
context.commit('add') 


ER 


其 中 actions 参 数 context 主 要 包含 了 commit、 
dispatch、state 和 getters 属 性 ， 调 用 commit 妈 可 触 
发 mutations 函 数 ， 使 用 dispatch 则 可 继续 触发 其 他 
actions 范 效 。mapActions 用 法 与 上 述 关 似 : 


Import { mapActions } from 'vuex' 


export default f{ 
fe 
methods: { 
.. .MapActions([ 


'add 


从 context 上 dispatch 方 法 可 以 看 出 ，actions 文 
持 多 个 action 的 组 合 使 用 ， 并 且 经 钊 会 使 用 到 异步 
请 求 获 取 服 务 闪 数据 ， 我 们 可 以 在 action 函 数 中 返 
回 Promise 对 象 来 处 理 这 种 情况 。 例 如 ; 


actions: { 
actionA ({ commit }) { 
return new Promise((resolve, reject) => 
setTimeout(() => { // 模拟 了 异步 请 求 获取 数据 
commit('someMutation') 
resolvel() 
}, 1000) 


然后 在 其 他 action 中 束 可 以 这 么 调用 : 


return dispatch('actionA').then(() => { 
commit('someOtherMutation') 


9.8.5 Modules 


最 后 说 明 下 Vue.js 2.0 中 State 的 分 模块 处 理 方 
式 ， 每 个 模块 都 可 以 包含 目 己 的 state、mutations、 
actions 和 getters，Vuex 也 会 给 它们 多 又 露 一 个 
rootState 的 参数 ， 可 以 用 于 访问 瓜 层 的 state 对 象 。 
大 致 鸭 使 用 方法 如 下 : 


const moduleA = { 
state: { ... }, 
mutations: { ... 
actions: { ... } 
getters: { ... 

} 


const moduleB = { 
State: { ... }, 
mutations: { ... }, 
actions: { ... } 


} 


const store = new Vuex.Storel({ 
modules: { 
a: moduleA, 
b: moduleB 


在 子 模 块 中 的 getters、mutations 和 actions 中 ， 
获取 的 state 宪 为 子 模块 本 里 的 state， 而 故 层 模块 的 
引用 将 会 又 露 在 action 的 context.rootState 和 getter 上 的 
第 三 个 参数 中 ， 例 如 : 


const moduleA = { 
/ 


actions: { 
actionA ({ state, commit, rootState}) { 
7 
} 
} 


const moduleA = { 
J/ Sei 
getters: { 
detSth (state, getters, rootState) { 


第 10 章 ”路 平台 开发 : Weex 


移动 端 开 发 ， 特 别 是 hybrid 这 类 扩 术 是 现在 前 

曾 绕 不 过 去 的 一 个 话题 。 在 2011 年 ，phoneGap 

( 现 改 名 cordova) 这 个 打包 工具 丈 已 问世 ， 它 能 
把 Web 项 目 打 包 成 native app， 可 以 在 ios， 
android， 甚 至 于 wp 上 运行 。 随 看 angularjs，reactjs 
的 面世 ， 这 疾 hybrid 撤 术 也 有 了 各 目 结合 的 方式 ， 
有 基于 angularjs+cordova 的 ionic，ReactNative 更 是 
异常 火爆 。 而 阿里 集团 在 2016 年 6 月 份 也 开源 了 采 
用 Vue.js 核 心 源码 的 weex， 在 语法 上 更 贴近 Web 开 
发 ， 从 公布 的 数据 来 看 ， 在 性 能 上 对 比 其 他 同类 
技术 也 有 一 定 优势 。 


10.1 Weex 人 简介 


Weex 作 为 一 项 路 平台 技术 ， 建 立 了 一 和 套 源 码 
转化 及 native 与 ]JS 通 信 的 机 制 。 在 开发 阶段 ， 我 们 
可 以 在 .we 文件 中 编写 <template>、<style> 和 
<script> 标 伟 ，weex 提 供 的 转化 絮 可 以 将 其 转换 成 
JS Bundle， 并 部 署 在 服务 器 端 以 啊 应 客户 端的 请 
求 。 当 客户 病 接 收 到 这 些 JS Bundle 后 ， 又 可 以 被 
客户 端 中 的 JS 引擎 调用 ， 用 于 管理 Native 视 图 的 洽 


染 、API 的 调用 以 及 处 理 用 户 的 交互 。 图 10-1 即 为 
weex 官 网 给 出 的 整体 流程 图 。 


transformer deploy 


Vs 
JS Framework 


JS-Native Bridge | 


callJs F ， callNative 


iOS Android H5 
RenderEngine RenderEngine RenderEngine 


图 10-1 


其 中 JS Framework 提 供 了 模块 注册 、 虚 拟 
DOM、Native 通 信 等 功能 。 当 JS Bundle 从 服务 坑 
下 载 后 ， 将 会 被 注册 成 模块， 并 编译 成 虚拟 
DOM， 发 送 泻 染 指令 给 Native。 而 iOS、Android 
和 H5 分 别 具 有 自己 的 渲染 3 引擎， 也 整 能 将 同一 段 
代码 分 别 在 不 同 的 并 展 示 成 相同 的 样式 ， 并 进行 
事件 绑 定 ， 处 理 用 户 的 交互 。 由 于 采用 的 方案 是 
演 染 成 Native 视 图 ， 所 以 在 性 能 上 会 比 传统 的 


Server 


webview 打 包 方 式 要 好 。 但 相应 鸭 ， 对 于 Web 前 端 
开发 着 来 说 并 不 能 使 用 所 有 HTMEL 中 的 特性 ， 
为 这 些 特性 都 需要 iOS 或 Android 演 染 引 擎 的 支 

拌 ， 如 果 疝 未 文 持 的 话 ， 在 Native 闹 其 实 并 不 能 展 
现 出 预期 的 效果 。 


10.2 ”Weex 安 装 
自 完 需要 下 载 Weex 代 人 码 。 在 
https://github.com/alibaba/weex 网 站 上 下 载 ， 可 以 


选择 v0.6.1 版 本 。 在 ios 和 android 中 局 动 weex 分 别 
需要 安装 各 目的 环境 。 


10.2.1 ios 环 境 安装 
weex 所 需 的 ios 环 境 安 装 步 又 如 下 : 
@ 安装 xcode， 可 从 app store 中 下 载 。 


@ 安装 CocoaPods (ios 开 发 的 第 二 方 资 源 管 
理工 具 ， 类 似 于 npm) 


需要 先 安装 rby，mac 默 认 自 带 mby， 但 版 本 
不 一 定 够 高 ， 可 以 通过 rvm (类 似 于 nvm， 同 时 管 
理 多 版 本 环境 ) 更 新 mby。 选 择 2.3.0 版 本 即 可 正 


常安 装 CocoaPods 。 


选择 2.3.0 版 本 即 可 正常 安装 CocoaPods。 和 安装 
命令 为 :sudo gem install cocoapods 


@ 进入 weex 目 杂 下 ios/playground, 并 运行 pod 
install， 安 六 第 三 方 资 源 ， 该 过 程 比较 长 ， 请 耐心 
稚 住 
二 全 ° 


@ 用 xcode 打 开 WeexDemo.xcwork Space。 


@ 单 击 “运行 ? 即 可 看 到 官方 鸭 demo， 如 图 10- 
2 所 示 。 


[> 治 WeexDemo ) BB iPhone 4s 


IPhone 45 ~ iPhone 451iOS 9.11f38B137) 


Carrier 全 2:08 PM 


.sie | 


Weex Demo 


Hello World 
More Syntax 
(Whmon Style 
Animation 
Text 


Image 


图 10-2 


10.2.2 android 环 境 安装 


android 环 境 安 冯 步骤 如 下 : 

@ 下 载 安 装 JDK 和 Android Studio 。 

@ 用 android studio 打 开 android/playground。 
@ 首次 可 能 会 有 些 安 朗 包 没有 表 好 ， 打 开 


SDK manager， 人 确保 图 10-3 中 这 几 个 包 安 装 好 ， 以 
及 对 应 Handroid SDK 。 


部 Android Support Repository 35 区 Installed 
Intel x86 Emulator Accelerator (HAXM installer) 6.0.3 区 Installed 
图 10-3 
@ 安装 成 功 后 ， 单 击 运行 ， 如 图 10-4 所 示 。 
图 10-4 


@ 即 可 看 到 官方 样 例 ， 如 图 10-5 所 示 。 


5554:Nexus 5_APIL_21_x86 
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图 10-5 


10.2.3 ”web 端 运行 


weex 同 笠 也 文 择 在 web 闪 直接 运行 ， 
下 : 


@ 在 weex 代 人 码 根 目录 下 运行 ./start 。 


@ 通过 浏览 器 访问 http://127.0.0.1:12580/ ， 如 
图 10-6 所 示 。 


DD 127.0.0.1:12580 

| 医 

Im 加 腻 国 ! 二 作 相关 网 站 ! ” 息 css3 息 契 线 T 具 ” 咎 技 术 博客 咎 php 
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图 10-6 


这 样 三 端的 环境 基本 束 搭 建 起 来 了 ， 我 们 可 
以 先 在 Web 中 进行 开发 ， 达 到 一 定 的 效果 后 就 可 
以 使 用 ios 和 android 模 拟 絮 观察 native 下 页 面 的 展示 
和 鸡 果 。 


10.3” Weex 实 例 与 运行 


weex 开 源 代 人 码 目 隶 下 的 exapmles 给 用 户 提 供 
了 不 少 已 经 写 好 的 实例 ， 可 以 先 通 过 hello.we 这 个 
样 例 人 简单 介绍 下 weex 的 开发 。 


如 第 10.2 厄 所 述 ， 在 weex 根 目 永 下 运行 ./start 
时 ， 可 以 通过 浏览 锅 访 问 到 家 网 提供 的 样 例 ， 单 
击 “Hello World” 即 可 跳 转 到 hello.we 对 应 的 页 面 ， 
如 图 10-7 所 示 。 


L 127.0.0.1:12580/index.html?page=./examples/build/hello.is 
“可 == ! 于 作 相关 网 站 所 csss 乓 在线 工具 ” 国 技术 博客 “的 | 


Phone 6 Plus v 414 X 736 100% v 


Hello World. 


图 10-7 


hello.we 代 人 码 如 下 : 


<template> 
<div> 
<text style="font-size:100px;">Hello World. 
</text> 
</div> 


</template> 


基本 语法 与 .vue 和 vue-loader 类 似 ， 也 是 在 一 
个 文件 中 通过 template、style、script 标 俭 包 囊 对 应 
Hhtml、css、js 结 构 。weex 也 提供 了 多 个 内 置 标 
签 ， 例 如 本 例 中 的 text， 来 进行 页 面 的 布局 。 


我 们 可 以 试 着 对 hello.we 进 行 以 下 修改 ， 增 加 
一 些 样 式 和 js 方法 。 


<template> 
<div> 
<text class="title">{{ msg }}</text> 
<1e 
weex 内 置 button 标 签 


onc1ick 为 绑 定 事件 语法 
type 和 size 分 别 对 应 了 button 内 置 的 样式 
- -> 
<wxc-button value="alert" onclick="alert" 
type="primary" size="middle"> </wxc-button> 
</div> 
</template> 


<script> 
本 引入 weex 的 内 置 组 件 ， 本 例 中 主要 是 为 了 使 用 wxc-button 
不 签 

reduire(' weex-Ccomponents ' ) ; 


输出 的 对 象 与 Vue .js 类 似 ， 符 合 Vue ,extend 属 性 的 构建 器 


module.exports = { 
data : { 
msg : 'Hello Weex' 


methods : { 


alert : function() { 
alert(this.msg); 
} 
} 
}; 
</script> 
<style> 
.title { 
font-size: 100px; text-align: center; 


} 
</style> 


oe 即 可 看 到 效 未 ， 如 图 10-8 
示 “。 


= TI 12580/index.html?page=./examples/build/hello.js 


iPhone4Y 320 x 480 100% v 


Hello Weex 
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Hello Weex 


Prevent this page from creating additional dialogs. 


OK 


图 10-8 


如 果 需 要 在 ios 或 android 环 境 中 运行 程序 ， 看 
到 实际 效果 的 话 ， 我 们 有 两 种 方式 : 


@ 修改 ios 或 android 应 用 的 jsbundle 的 记 访 问 地 
址 ， 即 native app 实 际 调用 的 js bundle 是 在 你 当前 机 
器 启动 的 服务 上 的 。ios 对 应 的 修改 文件 为 
DemoDefine.h， 将 其 中 的 #define CURRENT _IP 


@'"your computer device 计 "， 修 改 为 目 己 机 硕 的 局 
域 网 的 ip 即 可 ;，android 则 修改 
app/java/com.alibaba.weex/IndexActivity 文 件 中 的 
private static String CURRENT_IP= DEFAULT_IP 


@ 下 和 完 安 狼 weex 的 开发 工具 weex-toolkit: 
npm install -g weex-toolkit ° 


然后 在 手机 上 安装 weex 官网 提供 的 android 或 
ios 的 playground 应 用 。 


人 在 weex 根 目 孙 下 运行 命令 weex 
examples/hello.we -qdr。 


然后 用 手机 的 playground 扫 描 这 个 二 维 码 (pc 
和 手机 需要 在 同一 wifi 下 ) ， 即 可 在 手机 上 看 到 效 
果 ， 如 图 10-9 所 示 。 


localhost :weex-B.6.1 6aovinCLy$ weex examples/hello.we --qh 


The following QR encoding url is 
http:77 18.62.58.28:89617uweex_tmpxh5_nenderxhello.js?uwspont=8882 


Please download Heex Playground app from https://github.com/alibaba/weex and scan this OR 
ame Hi-Fi network 9s your computer runing Weex serven. 


图 10-9 


10.4 ”Weex 基 础 语法 


Weex 的 语法 与 Vue.js 类 似 ， 只 不 过 指令 都 去 挥 
了 v- 这 个 前 缀 ， 本 节 简 单 介绍 一 下 Weex 的 基础 用 
人 事件 绑 定 和 模板 你 罗 辑 这 


10.4.1 数据 绑 定 


Weex 的 数据 绑 定 也 是 采用 {{}} 作 为 标记 ， 同 
时 也 支持 语法 表达 式 和 计算 属性 ， 御 不 0 
和 model 特 性 ， 如 采 需 要 同步 用 户 的 输入 数据 ， 
要 在 oninput 或 者 onchange 上 手动 修改 数据 。 


<template> 
<div> 
<1! 一 普通 绑 定 - -> 
<text class="title">{{ msg }}</text> 
<! 一 文 持 表达 式 - -> 
<text>{{ prefix + '-' + msg }}</text> 
<! 一 使 用 计算 函数 --> 
<input type="number" class="input" value=" 
{{yuan}}" onchange= "changePrice" /> 
</div> 
</template> 
<script> 
require('weex-components"' ); 


module.exports = { 


data : { 
msg : 'Hello Weex', 
prefix : 'ali', 


price : 100, 


}, 
computed : { 
yuan :; { 
get : function() { 
return (this.price / 100).toFixed(2); 


set : function(value) { 
this.price = Value * 100; 


}) 
methods : { 
changePrice : function(e) { 
this.yuan = e.value,; 
} 
} 
}3 


</script> 


10.4.2 ”事件 绑 定 


Weex 的 事件 绑 定 直接 采用 的 是 行内 绑 定 ， 例 


如 : 


<template> 

<wxc-button value="alert" onclick="alert('arg', 
$event)" type= "primary" size="middle"></Wwxc- 
button> 


</template> 


<script> 
module.exports = { 
methods : 
alert: function (arg1，e) { 
// TODO 
} 
} 


</script> 


$event 对 象 中 主要 包含 了 3 个 属性 。 
Q@ type: 触发 事件 的 名 称 。 

@ target: 触发 事件 的 元 素 。 

@ timestamp: 触发 时 间 。 


10.4.3 ”模板 逻辑 


Weex 中 采用 if 和 repeat 属 性 来 进行 模板 的 逻辑 
控制 ， 使 用 方法 如 下 : 


<template> 


<container> 
<text onclick="toggle">Toggle</text> 
<image src="..." if="{{shown}}"></image> 
</container> 
<container> 
<container repeat="{{1list}}" class=" 
{{gender}}"> 
<image src="{{avatar}}"></image> 
<text>{{nickname}}</text> 
</container> 
</container> 
</template> 


其 中 repeat 也 支持 {{v in list}}、{{(k, v) in 
list}} 的 写法 ， 以 及 $index 属 性 获取 数组 序列 。 


10.5 Weex 内 置 组 件 


Weex 目 喘 提供 了 不 少 内 萤 的 组 件 ， 对 于 一 些 
电 丙 类 、 新 闻 类 应 用 来 说 提供 了 不 错 的 文 持 。 我 
们 只 需要 调用 组 件 并 设置 相关 的 属性 整 可 以 生成 
三 闹 虱 能 使 用 的 视图 功能 ， 极 大 提升 了 开发 效 
率 。 本 闻 主要 介绍 weex 组 件 的 公共 属性 及 事件 ， 
以 及 部 分 组 件 的 属性 及 使 用 方式 。 


10.5.1 scroller 


scroller 组 件 可 以 包含 多 个 子 组 件 ， 如 采 子 组 
件 的 高 度 总 和 超过 了 scroller 本 喘 的 高 度 ， 即 可 滚 
动 子 组 件 。 


<template> 
<scroller> 
<div repeat="{{1list}}"> 
<text>{{name}}: ${{price}}</text> 
</div> 
</scroller> 
</template> 


<script> 
module.exports = { 
data: { 
list: [ 


{Name: '...', price: 100}, 
{Name: '...', price: 500}, 
{Name: '...', price: 1.5}, 


] 
} 


</script> 


scroller 组 件 还 可 以 包含 refresh 和 loading 子 组 
件 ， 用 于 提供 下 拉 刷 新 和 上 拉 加 载 更 多 这 两 个 功 
能 。 我 们 以 loading 为 例 : 


<loading class="loading-view" display=" 
{{loading_display}}" onloading= "onloading"> 
<loading-indicator style="height:60;width:60" > 
</loading-indicator> 
</loading> 
<script> 
require('weex-components"' ) ; 
module.exports = { 
methods: { 
onloading: function(e) { 
Var self = this， 
self,.loading display = 'show'; 
setTimeout(function () { 
self.loading display = 'hide';， 
}, 1000) 


data: { 
refresh_display: 'hide', 
loading_display: 'hide', 
sections: |[ 


</script> 


组 件 提 供 onloading 事 件 和 display 属 性 ， 用 于 
控制 显示 loading 组 件 ， 并 处 理 loading 中 执行 的 业 


务 逻 各。 
10.5.2 list 


list 即 为 常用 的 列表 组 件 ， 可 以 包 合 header、 
cell 、refresh、loading 组 件 。 其 中 cell 组 件 为 list 元 


件 ， 用 于 展现 列表 元 系 的 属性 及 行为 。refresh 和 
loading 组 件 效果 与 scroller 关 似 。 


<template> 
<div> 
<list class="1list"> 
<cell class="row" repeat="{{rows}}" index=" 
{{$index}}"> 
<div class="item"> 
<text class="item-title">row {{id}} 
</text> 
</div> 
</cell> 
</list> 
</div> 
</template> 
<script> 
require('weex-components"' ); 
module.exports = { 
data: { 
rows:[ 
{id: 1}, ... , {id: 29} 


] 
} 
} 


</script> 


10.5.3 Switch 


Switch 是 用 于 模仿 iOS 风 格 的 一 个 开 / 关 插件 ， 
主要 的 属性 为 checked， 可 以 通过 数据 绑 定 来 控制 
开 天 。 组 件 也 提供 了 onchange 事 件 ， 传 递 当 前 组 
件 的 状态 和 事件 的 发 生 时 间 。 


<switch checked="{{checked}}" onchange="onchange"> 
</switch> 
<script> 

require('weex-components"' ); 


module.exports = { 
data : { 
checked : false, 
}, 
methods : { 
onchange : function(e) { 
console.1log(e); 


} 


/ 
</script> 


上 默认 样式 如 图 10-10 所 示 。 
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图 10-10 
10.5.4 Slider 


Slider 组 件 提 供 了 轮 播 图 的 效果 ， 通 过 属性 
auto-play 可 以 设置 是 否 目 动 播放 ，interval 则 可 以 
设 定 每 个 页 面 停留 的 时 间 。 组 件 中 可 以 包含 子 组 
件 indicator， 用 于 标记 轮 播 序 列 ，indicator 目 号 也 
提供 大 小 、 颜 色 、 选 中 状态 属性 的 修改 。 页 面 切 
eh 可 以 监 昕 onchange 事 件 ， 获 取 当 前 页 面 的 
予 写 。 


<template> 
<div> 
<slider auto-play="true" onchange="change" > 


<image repeat="{{imageList}}" src="{{src}}" 
></image> 
<indicator></indicator> 
</slider> 
</div> 
</template> 


<script> 
require('weex-components"' ); 
module.exports = { 


data: { 
imageList: [{tsrc: '...'}, {src: '...'}] 
methods: { 
change: function (e) { 
} 
} 
</script> 


官方 demo 中 Slide 实例 的 展示 如 图 10-11 所 示 。 
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图 10-11 


10.5.5 wxc-tabbar 


wxc-tabbar 组 件 主 要 模拟 了 native app 的 底层 
tab 切 换 的 样式 及 功能 。 我 们 可 以 先 看 一 下 wxc- 
tabber 的 demo 效 果 ， 如 图 10-12 所 示 。 


This is Tab 2 Test. 


图 10-12 


wxc-tabbar 主 要 提供 了 瓜 部 tab 图 标的 展示 和 挥 
制 ， 而 每 个 tab 都 会 对 应 一 个 内 容 组 件 ， 而 这 个 内 
容 组 件 则 由 使 用 者 目 己 定义 路 径 进 行 引 用 ，wxc- 
ee ° 以 下 面 代码 为 
列 : 


<template> 
<div style="flex-direction: column;"> 


<wxc-tabbar tab-items = {{tabItems}}></wxc- 
tabbar> 
</div> 
</template> 
require( ' weex-Ccomponents ' ) ; 
module.exports = { 
data: { 
tabItems: [ 
{ 
index: 0， // tab 的 顺序 
title: 'tab1'， // tab 名 称 
titleCcolor: '#000000'， // tab 名 称 字体 颜色 
icon: "， // 必 填 项 ， 即 使 属性 为 空 
image: "， // tab 图 标 
selectedImage: "，// tab 选 中 国标 
src: 'component/tabbar/tabbar-item.js? 
itemId=tab1'，// 内 容 组 件 地 址 
visibility: 'visible'  // tab 当 前 显示 状态 
}, 


除了 tab-items 以 处 ，wxc-tabbari 不 有 selected- 
color 和 unselected-color 两 个 属性 ， 用 于 控制 tab title 
在 选中 和 未 选中 时 的 字体 闫 色 。 男 外 ， 我 们 可 以 
在 create 或 ready 钧 子 函 效 中 监听 tabBaronClick 事 


件 ， 点 击 tab 切 换 上 时 wxc-tabbar 会 同上 冒 泡 这 个 事 
件 ， 例 如 : 


methods: { 
ready: function (e) { 
var vm = this; 
vm.$on('tabBar.onClick',function(e)t 
console.1log(e) 


A 


10.5.6 wxc-navpage 


wxc-navpage 模 拟 了 native app 顶 部 导航 的 歼 
果 ， 具 体 的 效果 和 使 用 代码 如 图 10-13 所 示 。 
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图 10-13 


<wxc-navpage data-role="none" height= 
{{navBarHeight}} 
background-color="#ff5898" title={{title}} 
title-color="white" left-item-title="More" 
left-item-color="white" right-item-src=".."> 


</wxc-navpage> 


wxc-navpage 基 本 上 徘 属性 进行 样式 及 按键 的 控 
制 ， 也 仪 提供 了 左 侧 和 后 侧 各 一 个 按键 的 空间 。 
具体 的 使 用 属性 如 下 。 


height: 顶部 导航 高 度 。 


background-color: 导航 育 景 色 。 


title: LS 3 0 
title-color: 导航 字体 颜色 。 
left(right)-item-title: 左 〈 右 ) 按键 名 字 。 


工 
left(right)-item-color: 左 〈 右 ) 按键 字体 颜 
色 。 


left(right)-item-src: 左 ( 右 ) 按键 图 标 。 


后 wxc-tabbar 类 似 ，wxc-navpage 也 提供 了 问 
上 冒 泡 的 事件 ， 分 别 为 naviBar.leftItem.click 和 
naviBarrightItem.click， 我 们 只 需要 在 页 面 中 $on 监 
听 这 两 个 事件 ， 束 可 以 处 理 用 尸 点 击 导 航 左 右 按 
键 的 逻辑 。 


小 结 

除了 上 述 组 件 乙 外 ，weex 还 提供 了 text、 
image、a、video、input、web 等 内 置 组 件 ， 有 具体 
的 用 法 和 实例 可 以 参考 


https://alibaba.github.io/weex/doc/components/main.h 


tml 网 站 中 的 官方 文档 。 整 体 来 说 组 件 对 津 规 的 业 
务 开 发 有 一 定 的 文 持 ， 但 如 果 需 要 一 些 定 制 化 的 
修改 ， 目 前 看 起 来 可 能 还 不 大 方便 。 


10.6 ”Weex 内 置 模块 


Weex 内 置 了 一 些 功 能 模块 ， 可 以 通过 require 
(‘@weex-module/**) 的 方式 引用 进来 ， 并 使 用 
该 模块 的 相关 api。 本 古 吏 主要 介绍 一 下 Weex 中 的 

这 些 内 置 模块 及 其 作用 。 


10.6.1 dom 


dom 模 块 ， 顺 名 思 义 ， 主 要 提供 了 对 DOM 树 
操作 的 一 些 方法 。 和 传统 浏 换 硕 中 的 document 探 
作 DOM 不 同 的 是 ， 该 模块 API 是 将 vitrual-dom 中 的 
消息 发 送 到 native 洽 染 需 来 进行 DOM 树 的 更 新 ， 而 
且 该 模块 中 仅 scrollToElement 可 在 .we 文件 中 技 
行 ， 其 余 方 法 仅 能 伏 native 洽 染 锅 使 用 。 

scrollToElement(node, options): 让 页 面 深 动 到 
对 应 广 点 ， 该 API 仪 能 在 scroller 和 list 组 件 中 使 
用 o 


node: 需要 深 动 到 的 节点 。 


options : { 
offset : Number // 深 动 到 廊 点 的 偏 移 距离 ， 默 认为 0 


} 


具体 的 使 用 方法 如 下 : 


var dom = require('@weex-module/dom'"' ) ; 
module.exports = { 
methods: { 
scroll: function () { 
dom.scrollToElement(this.s$el('someId'), 
{offset: 10}); 
} 


} 


} 


10.6.2 steam 


steam 模 块 主要 提供 的 是 网 络 请 求 方法 ， 类 似 
于 ajax 和 vue-resource 的 角色 。 具 体 方法 和 参数 如 
下 : 


var stream = require('@Qweex-module/ stream); 
stream.fetch({ 
method: 'GET'， // HTTP 请 求 方法 
0 Da // HTTP 请 求 地 址 
type:'json', // request 请 求 类 型 
body: { .. }, // HTTP body 数 据 结构 
headers: { .. } // HTTP 头 部 属性 
function(response) { // 请 求 完 成 回调 函数 
pA 
response { 
status(number) // response 的 状态 码 
statusText(string) // response 的 状态 描述 
ok(boolean) // 状态 码 在 200 一 299 值 为 true 
data(object) // response 的 返回 数据 
headers(object) // response 的 headers 对 象 


} 
wy 


},function(response){  // 请 求 过 程 回 调 函 数 
A 


response 1{ 
readyState(number) // 当前 请 求 的 状态 值 
status(number): // response 状 态 值 
length(number): // 已 接受 的 数据 长 度 
statusText(string): // response 状 态 描述 
headers(object): // response headers 对 象 ， 包 括 


} 
*/ 
}); 


10.6.3 modal 


modal 模 块 主要 提供 了 模仿 框 的 相关 功能 ， 
要 包含 toast、alert、confirm、prompt 4 种 类 型 。 


toast 类 型 使 用 方法 如 下 : 


var modal = require('@weex-module/modal' ) ; 
modal.toast({'message': 'I am toast!', 'duration': 
1}); 


其 中 duration 为 toast 模 态 框 的 显示 时 间 ， 之 后 
会 日 动 消 失 。 


alert 类 型 使 用 方法 如 下 : 


modal.alert(f{ 
message: 'alert modal', 
okTitle: 'ok' 


}, function() { 
// 单 击 确认 按钮 后 的 回调 函数 
}) 


效果 如 图 10-14 所 示 。 
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图 10-14 


confirm 类 型 使 用 方法 如 下 : 


modal.confirm({ 

message: 'confirm modal', 

okTitle: 'ok', 

cancelTitle: 'cancel' 
}, function(result) { 

// 单 击 按钮 后 的 回调 函数 ，result 值 为 okTitle 或 
cancelTitle 的 值 


}); 


效果 如 图 10-15 所 示 。 
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图 10-15 


prompt 类 型 使 用 方法 如 下 : 


modal.prompt({ 
message: 'prompt modal', 
okTitle: "ok '， 
cancelTitle: 'cancel' 
}, function(res) { 
console.log(res.result + ', "+ res.data); 
// res.result 为 ok(cancel)Title 的 值 ，res ,data 为 输入 


值 
}); 


效果 如 图 10-16 所 示 。 
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图 10-16 


10.60.4 animation 


animation 提 供 了 动画 相关 的 功能 ， 方 法 名 为 
transition， 目 前 文 持 translate、rotate 和 scale 三 种 变 


化 形式 。 具 体 的 使 用 方式 如 下 。 


api 示 例 : transition(node, options, callback)。 


var animation = require('@Qweex-module/animation'); 


animation.transition(testEl, { 
styles: { 
color: '#FF0000'!， // 动画 结束 后 元 素颜 色 
transform: 'translate(1，1)"， // 动画 效果 ， 包 括 
translate/rotate/scale 3 种 方式 
transformorigin: 'center center' // 动画 源 点 
}, 
duration: 0，//ms 动画 持续 时 间 
timingFunction: 'ease'， // 动 画 时 间 画 数 ， 值 包括 
linear/ease-in/ease-out/ease-in-out/cubic- 
bezier(x1,y1,x2,y2) 
delay: 0 //ms， 动 画 延 迟 开 始 时 间 
}, function () { 
console.log('animation finished.') 


}) 


weex 上 的 example/animation.we 中 列举 了 大 部 分 
的 动画 样 例 ， 利 用 的 是 this.$call 方 式 调用 animation 
模块 . 


this.$call('animation', 'transition', 
this._ids.block.el.ref，{ // $call 第 一 个 参数 为 模块 
和 名， 第 二 个 参数 为 函数 名 

styles: styles, 

timingFunction: timingFunction, 

duration: duration 
}, callback ); 


10.6.5 webview 


webview 模 块 主要 用 于 控制 web 组 件 的 路 任 变 
化 ， 类 似 于 location， 提 供 了 goBack、goForward 和 和 
reload 方 式 。 具 体 使 用 方式 如 下 : 


<template> 
<div class="wrapper"> 
<div class="toolbar" append = “tree"> 
<wxc-button type="primary" size="small" 
value="back" onclick= "goback"></wxc-button> 
<wxc-button type="primary" size="small" 
value="forward" onclick= "goforward"></wxc-button> 
<wxc-button type="primary" size="small" 
value="refresh" onclick= "refresh"></wxc-button> 
</div> 
<web class="content" id="webview" 
src='https://m.taobao.com/?spm= 0.0.0.0&v=0#index' 
></web> 
</div> 
</template> 
<script> 
require('weex-components"' ); 
var $webview = require( 'Qweex- 
module/webview' ); 
module.exports = { 
methods: { 
goback: function() { 
Var webElement = this.$el('webview' ); 


$webview.goBack(webEJement .ref); 

}) 

goforward: function() { 
var webElement = this.$el('webview' ); 
$webview.goForward(webElement.ref ); 

> 

refresh: function() { 
Var webElement = this.$el('webview' ); 
$webview.reload(webElement.ref); 

} 

} 
} 


</script> 


三 种 方法 都 需要 接受 web 组 件 的 引用 作为 参数 
方 可 执行 。 


10.6.6 navigator 


navigator 柑 块 提 供 了 组 件 间 跳 转 的 方法 ， 类 似 
于 浏 哆 妖 的 history， 通 过 push 和 pop 方 法 来 控制 页 
面 的 载 入 和 退出 。 具 体 使 用 方法 如 下 : 


push({ url : ", animated : true}, callback) 


| 


push 方 法 文 持 的 参数 包 合 载 入 页 面 的 url 和 
animated 是 否 使 用 动画 ，callback 则 在 页 面 载 入 完 
成 之 后 执行 。 


pop({ animated : true }, callback), pop 方 法 与 
push 方 法 类 似 ， 只 不 过 第 一 个 参数 对 象 只 包含 
animated 属 性 ， 不 需要 传 和 url。 


weex 上 的 examples/component/navigator-demo.we 


给 出 了 实例 : 


methods: { 
push: function() { 
var vm = this; 
var params = { 
'url': this.baseURL + 'component/navigator- 
demo.js?test=1", 
'animated' : 'true', 


vm.$call('navigator', 'push',params, function 


() {}); 


[4 


pop: function() { 
var vm = this; 
var params = { 
'animated' : 'true', 


} 


vm.$call('navigator', 'pop',params, function () 


[4 


10.6.7 storage 


storage 模 块 提供 了 本 地 存储 的 功能 ， 可 供 调 
用 的 api 方 法 如 下 : 


@ setItem(key, value, callback)， 设 置 key/value 
属性 。 


@ getItem(key, callback)， 获 取 keyH 的 value 值 。 


@ removeltem(key, callbac)， 删 除 key 的 value 
值 。 


@ length(callback)， 获 取 storage 的 长 度 。 


@ getAllKeys(callback)， 获 取 storage 的 所 有 
值 。 


所 有 操作 所 获取 的 值 都 通过 callback 中 的 参数 
对 象 的 data 属 性 来 传递 ， 例 如 : 


var storage = require('@Qweex-module/storage' ); 
storage.setIitem('key', 'test', function(e) { 

// e 对 象 包含 resulLt 和 data 属 性 ，result 为 函数 调用 是 否 成 
功 ，data 则 包含 函数 的 返回 值 
了 ) 
storage.getIitem('key', function(e) { 


console.1log(e.data); 


}); 


小 结 


Weex 提 供 的 器 平台 解决 方 采 ， 与 Vue.js 一 起 添 
加 了 生态 圈 上 新 的 一 块 。 和 Reactjs 与 React-Native 
这 样 的 组 合 类 似 ，Vue.js 的 开发 方式 和 api 设 计 也 进 
入 了 移动 端的 开发 拖 畴 ， 也 使 得 web 前 端 开 发 者 能 
在 新 的 领域 扩展 目 己 的 作用 。 目 前 米 说 ，weex 近 
供 了 3 种 工作 模式 : 山 类 似 于 React-Native， 文 持 单 
页 使 用 或 整个 App 使 用 Weex 开 发 ， 但 目前 还 缺少 
路 由 和 生命 周期 管理 ，(2 把 Weex 当 作 一 个 
iOS/Android 组 件 来 使 用 ， 手 机 淘宝 的 自 页 、 主 搜 
结果、 交易 组 件 化 等 都 末 用 此 种 解决 方案 ， 页 面 


主页 也 比较 稳定 ， 并 且 能 够 实现 热 更 新 ， 这 对 需 
求 变 更 比较 大 的 页 面 来 说 省 去 了 频 爱 发 版 的 碾 
烦 ; (在 H5 中 使 用 Weex， 利 用 组 件 直 接 进行 页 面 
开发 ， 但 对 于 一 些 复杂 页 面 和 交互 性 强 的 页 面 说 
来 还 不 十 很 适用 。 


第 11 章 ”Vue.js 2.0 新 特性 


Vue.js 2.0 版 本 已 于 2016 年 10 月 1 日 正式 发 布 ， 
除了 在 原 有 的 基础 上 进行 调整 外 ， 还 加 入 了 不 少 
新 的 特性 。 本 章 主要 介绍 两 个 方面 ，Render 函 数 
和 服务 端 泻 染 。Render 函 数 给 开发 者 提供 了 上 自由 
度 更 高 的 模板 编程 能 力 ， 而 不 仅仅 局 限于 之 前 的 
vV-if/v-else 指 令 。 服 务 端 泻 染 则 为 SPA 项 目 提 供 了 
有 利于 SEO 和 网 络 情况 慢 的 解决 方案 ， 弥 补 了 纯 


粹 前 剖 渔 染 的 一 些 星 六 。 


11.1” Render 芳 数 


一 般 我 们 在 编写 组 件 时 ， 通 钊 采用 template 来 
创建 HTML 结 构 。 这 种 写法 的 好 处 古 直观 、 浓 
晰 ， 对 于 写 惯 页 面 的 用 户 来 说， 直接 束 能 使 用 。 
但 对 一 些 复杂 场景 ，template 中 的 v-if/v-else 和 slot 
束 可 能 显得 不 够 用 了 。 例 如 我 们 想 通 过 参数 来 控 
制 模板 中 生成 的 组 件 ， 调 用 接口 可 以 定义 为 <my- 
component type='text'></my-component>, 一 般 可 能 
会 这 么 编写 模板 : 


<div> 
<Text v-if='type == 'text"></Text> 


<Image v-if='type == 'image"></Image 


这 种 写法 显然 不 是 很 合 随 着 需要 控制 的 
el 
增加 v-if 浏 晰 。 而 Render 函 数 束 可 以 解决 上 述 问 
题 ， 我 们 可 以 将 上 述 组 件 改写 成 : 


Vue.component('my-component', { 
render: function (createElement) { 
return createElement( 
require('./components/' + this,.type) // 动 
态 引 入 子 组 件 


这 样 整 可 以 通过 参数 动态 地 加 载 组件 移 项 ， 
而 不 需要 通过 v-if 去 做 一 个 个 的 判断 ， 组 件 的 加 载 
也 里 加 显得 灵活 。 


11.1.1 createElement 用 法 


Render 男 数 中 主要 提供 了 createFElement 方 
法 ， 可 以 接受 三 个 参数 ， 这 里 主要 介绍 
createElement 的 参数 类 型 和 用 法 。 


1) 组 件 类 型 : 参数 可 以 直接 为 String， 组 件 
选项 对 象 ， 以 及 返回 值 为 String 或 组 件 选 项 对 象 的 
函 效 。 例 如 : 


createElement( 'div ' ) 

createElement({ 
template :; “ . 
data : {..} 


createElement(function( ){ 


return 'div' 


}) 


2) 属性 对 象 : 第 二 个 参数 为 可 选 参数 ， 包 合 
了 组 件 所 需 的 属性 的 对 象 集 合 ， 即 大 部 分 的 
HITML 属 性 及 Vue.js 组 件 属性 可 以 在 此 定义 ， 完 整 
的 数据 对 象 示 例如 下 : 


// 同 'v-bind:class' 一 致 ， 可 以 是 对 象 也 可 以 是 数组 
'class': { 


}, 
// 同 'v-bind:style' 一 致 
style: { 


3 
// 常规 HTML 属 性 
attrs: { 

id: 'text' 


}, 
// 组 件 props 属 性 
props: { 

type : 'text' 


}, 

// DOM 属 性 

domProps: { 
InnerHTML : VT......" 


hs 
// 事件 监听 选项 ， 使 用 $on 绑 定 的 事件 
on: { 

add: this.addHandler 


的 
// 原生 事件 监听 选项 
nativeOn: { 
click: this.nativeClickHandler 


}, 
// 目 定 义 指令 数组 ， 每 个 数组 元 素 即 为 指令 的 选项 
directives: |[ 


name: 'my-directive', 
value: this.directiveValue 


| 

// 如 果子 组 件 有 定义 slot 的 名 称 
slot: 'name-of-slot' 

// 其 他 特殊 顶层 属性 

key: 'myKey', 

ref: 'myRef' 


3) 子 闻 点 : 该 参数 也 为 可 选 参数 ， 类 型 为 
String 或 Array， 为 组 件 内 部 了 于 元 素 的 集合 。 具 体 
可 接受 的 形式 如 下 : 


[ 
createElement(MyComponent, {...}), 
'bar' 


] 


11.1.2 使 用 案例 


在 Render 范 数 中 ， 束 没有 v-if 和 和 v-for 这 样 的 指 
令 来 硕 助 我 们 编写 模板 了 ， 所 有 的 逻辑 部会 依 徘 


JavaScript 代 码 来 完成 。 例 如 : 


<ul v-if="items.1length"> 

<1i v-for="item in items">{{ item.title }}</1i> 
</Uul> 
<div v-else> 没 有 数据 。</div> 


在 Render 芳 数 中 ， 我 们 束 需 要 写成 : 


render: function (createElement) { 
If (this.items.length) { 
return createElement('ul', 
this.items.map(function (item) { 
return createElement('1i', item.title) 


})) 
} else { 


return createElement('div'，' 没 有 数据 。') 


} 


} 


需要 注意 的 是 ， 所 有 的 组 件 树 中 的 VNodes 必 
须 唯一 ， 例 如 上 述 例 子 如 琳 将 li 修改 成 : 


render: function (createElement) { 
var liVNode = createElement('11i°') 
return createElement('ul', [ 
liVNode, liVNode 
] ) 


} 


这 样 的 render 函 数 是 无 效 的 ，liVNode 即 为 重 
复 VNode 。 


11.1.3 ” 画 数 化 组 件 


函数 化 组 件 是 一 个 没有 状态 (data) 和 没有 
实例 this 上下文 ) 的 一 种 组 件 类 型 ， 只 通过 
render 函 数 进行 演 名 ， 以 及 render 函 数 中 新 增 的 
context 参 数 来 传递 上 下 文 。 由 于 不 存在 状态 和 上 
下 文 ， 组 件 的 深 染 开销 了 驶 比较 低 ， 间 用 于 不 含有 具 
体 模板 ， 但 根据 所 传 参 数 可 以 生成 具体 类 型 组 件 
的 情况 (有 点 类 似 于 abstract class) ， 使 用 方式 如 
下 : 


Vue.component('my-component', { 
functional: true, 
// functional 设 置 为 true 后 ，render 提 供 第 二 个 参数 作为 
上 
render: function (createElement, context) { 
// ... 
}, 
// Props 可 选 
props: { 
LL ss 


利用 函数 化 组 件 ， 我 们 可 以 将 本 章 中 最 初 的 
例子 改写 为 : 


Vue.component('my-component', { 
functional: true, 
render: function (createElement, context) { 
return createElement( 
require('./components/' + this.type), 
context.data, 
context.children 


| 


11.1.4 JSX 


Render 芳 数 的 编写 的 确 搁 烦 了 很 多 ， 所 以 官 
方 推 荐 了 一 丈 Babel 的 插件 babel-plugin-transform- 
vue-jsx， 用 来 将 JSX 转 化 成 Render 可 接受 的 返回 
值 。 


1. JSX 


JSX 是 React 捉 供 的 一 个 语法 方案 ， 可 以 在 
JavaScript 的 代码 中 和 直接 使 用 HTML 标 侈 来 编写 
JavaScript 对 象 。 其 使 用 的 是 XML-like 语 法 ， 这 种 
语法 方案 需要 通过 JSXTransformer 来 进行 编译 转 
换 成 真实 可 用 的 JavaScript 代 人 码 。 基 本 的 语法 规则 
为 遇 到 HTML 标 签 (以 < 开头 ) ， 就 用 HTML 规 则 
解析 ; 遇 到 代码 块 ， 即 以 { 开 头 ) ， 就 用 
JavaScript 规 则 解析 。 例 如 : 


Import MyComponent from './MyComponent.vue',; 


2. babel-plugin-transform-vue-]Jsx 


0 
又 如 下 : 


npm install\ 
babel-plugin-syntax-]jsx\ 
babel-plugin-transform-vue-]jsx\ 
babel-helper-vue-jsx-merge-props\ 


--Save-dev 


如 果 项 目 使 用 webpack 配 置 的 话 ， 添 加 
loader， 使 用 babel: 


loaders: [ 
{ test: /\.js$/, loader: 'babel', exclude: 
/Node_ modules/ } 


] 


并 在 .babelrc 中 添加 插件 : 


"presets": [“es2015"], 
"plugins": [“transform-vue-jsx"] 


3. 具体 用 法 


在 第 11.1.1 小 廊 中 介绍 了 createElement 参 数 的 
主要 用 法 ， 在 JSX 中 就 可 以 直接 写 在 HTML 标 签 
上 ， 例 如 : 


render (h) { 
return ( 
<div 
// 样式 属性 
class={{ active: true }} 
style={{ color: 'red', fontSize: '14px' }} 
id="text" 


// DOM 属 性 
domProps-innerHTML="......" 
// 事件 绑 定 
on-add={this.addHandler } 
nativeOon-click={this.nativeClickHandler} 
// 特殊 属性 
key="key" 
ref="ref™" 
slot="slot"> 
</div> 
) 
} 


小 结 


Render 芳 数 为 组 件 提供 了 一 种 更 程序 化 的 编 
写 方法 ， 但 从 开发 角度 来 说 还 是 增加 了 编写 的 成 
本 ， 所 以 Vue.js 2.0 对 两 种 演 染 方式 都 持 开 放 态 
度 ， 我 们 既 可 以 使 用 template 编 写 直 观 的 HTML 代 
但， 也 可 以 使 用 render 函 数 所 升 组 件 的 灵活 性 ， 各 
取 所 需 。 


11.2 服务 端 演 染 


在 2.3 世 中 已 经 对 比 过 了 前 后 端 泻 染 的 各 目 特 
点 ， 两 种 方式 都 有 目 己 的 适用 场景 。Vue.js 在 2.0 
中 加 入 了 服务 闹 泻 染 这 个 特性 ， 使 得 我 们 能 更 灵 
活 地 进行 选择 。 本 廊 就 主要 介绍 如 何在 Vue.js 2.0 
中 使 用 服务 端 渲染 (Server-Side Rendering) 。 


11.2.1 vue-server-renderer 


Vue.js 的 服务 问 深 染 的 基础 用 法 非常 简单 ， 主 
要 依赖 于 Vue-server-renderer， 由 它 提 供 『 方 法 将 
Vue.js 实 例 转化 成 HITML 字 符 捉 形式 。 例 如 : 


var Vue = require('vue') 
var app = new Vuel(t{ 
// 实例 模板 可 以 使 用 template 选 项 ， 也 可 以 使 用 render 函 数 
A 
render(h) 1{ 
return h('h1i', this.msg); 


A 
template : '<hi>{{msg}}</hi>"', 
data : { 
msg : 'hello world' 
} 


}) 


var renderer = require('vue-server- 
renderer').createRenderer() 


renderer.renderToString(app, function (error， 
html) { 


console.log(html) // => <h1 server- 
rendered="true">hello world</hi1> 


}) 


11.2.2 ”简单 实例 


对 于 一 个 Vue.js 页 面 来 说 ， 请 求 返 回 的 HTML 
可 以 由 服务 问 泻 染 好 ， 但 想 要 对 这 个 页 面 进行 对 
应 的 数据 绑 定 、 事 件 监 听 等 行为 ， 仍 需要 在 浏 贤 
絮 里 进行 ， 也 就 是 说 同一 个 Vue.js 实 例 既 需要 在 服 
务 闹 锌 用 作 泻 染 ， 叉 需要 在 浏 贤 紫 痢 伞 实例 化 从 
而 进行 数据 绑 定 。 所 以 在 编写 Vue 实 例 时 ， 需 要 
在 代码 中 区 分 当前 引用 的 是 后 只 环境 还 生前 病 环 
境 。 我 们 会 通过 下 面 这 个 完整 的 例 于 来 说 明 服务 


端 浑 染 。 


// static/app.js 
(function () { 'use strict' 
var createApp = function () { 
return new Vuel(t 
template: '<div id="app"> \ 
{tmsg}} 、 
<button @click="click">click</button>\ 
</div>"', 
data: { 


msg: 0 
}, 
methods : { 
click : function() { 
alert(this.msg); 


} 
} 
这 
// 判断 当前 环境 是 服务 端 环境 还 是 浏览 器 环境 
if (typeof module !== undefined” && 


module.exports) { 
// 服务 端 环境 ， 返 回 实例 的 构造 函数 
module.exports = createApp 
} else { 
// 浏览 妖 环境 ， 直 接 进 行 实例 化 
this.app = createApp() 


}).call(this) 


// index.html 
<1DOCTYPE html> 
<html> 
<head> 
<title>SSR</title> 
<script 
src="http://cdn.bootcss.com/vue/2.0.3/vue .min.jJs" 
></script> 
</head> 
<body> 
<div id="app"></div> 
<script src="/static/app.js"></script> 
<script>app.$mount('#app' )</script> 
</body> 
</html> 


接 下 来 就 是 服务 端 代码 ， 我 们 使 用 NodeJS 的 
express 作 为 服务 闹 框 架 ， 使 用 前 通过 npm install 进 
2 一 他 > 斗 上 


1 汪 。 


// Server ,js 

"USe strict' 

var fs = require('fs') 

var path = require('path’') 
global.Vue = require('vue') 

// 获取 ijndex .html 布 局 

var layout = fs.readFileSync('./index.html', 
'utf8') 

var renderer = require('vue-server- 
renderer').createRenderer() 

// 创建 一 个 Express 服 务 器 

Var express = require('express') 
Var Server = express() 


// 设置 "static" 文 件 夹 为 静态 资源 路 径 
server.use('/static', express.statict( 
path.resolve(__dirname, 'static') 


) ) 
// 人 处理 所 有 的 Get 请 求 


server.get('*', function (request, response) { 
renderer .renderToString ( 
// 获取 app. js 的 Vue 实 例 
require('./static/app' )(), 


function (error, html) { 


If (error) { 
console.error(error) 
return response 

.Status(500) 
.Send('Server Error') 


// 将 泻 染 好 的 HTML 插 入 奉 换 index .html 中 ， 返 回 给 浏览 
器 
response.send(layout.replace('<div 


id="app"></div>', html)) 
} 
) 


}) 
// 监听 3000 端 口 ， 通 过 http://localhost:3000/ 访 问 应 用 
server.listen(3000, function (error) { 

if (error) throw error 

console.1log('Server is running at 
localhost:5000') 


}) 


11.2.3 ”缓存 和 流 式 啊 应 


在 服务 端 泻 染 时 ， 我 们 可 以 从 两 方面 考虑 性 
能 问题 。 第 一 ， 如 何 减 少 组 件 泻 染 成 HTML 字 符 
串 的 时 间 ， 特 别 当 这 个 组 件 会 被 经 常 使 用 ， 第 
二 ， 经 过 服务 闹 洽 染 后 ， 请 求 返 回 的 HTML 显 人 然 
会 比 采 用 前 端 泻 染 返回 的 数据 量 要 大 ， 如 果 能 对 


传输 过 程 进行 优化 ， 也 将 能 减少 服务 闪 泻 染 的 缺 


陷 。 
1. lru-cache 


官方 推荐 了 ]lru-cache 配 合 vue-server-renderer 
使 用 ， 能 够 给 泻 桨 怖 提供 一 个 缓存 对 象 ， 可 以 提 
共 高 达 1000 个 独立 的 渲染 ， 使 用 方式 也 非常 简 
单 ， 例 如 : 


var createRenderer = require('vue-server- 
renderer ' ) ,createRenderer 
var lru = require( ' Jru-cache  ) 
var renderer = createRenderer ({ 
cache: lru(1000) 


}) 


而 组 件 需 要 提供 一 个 唯一 的 name 和 
serverCacheKey 芳 数 ， 画 数 返 回 值 中 需要 包含 组 
件 作 用 域内 的 数据 且 唯 一 ， 例 如 : 


Vue.component({ 
name: 'l]ist-1i', 
template: '<1i>{{ item.name }}</1i>', 


props: ['item"'], 
serverCachekey: function (props) { 
return props.item.name + '::' + props.item.id 


需要 注意 的 是 ， 尽 量 避 免 在 缓存 组 件 中 依赖 
全 局 状态 (例如 Vuex 中 的 状态 ) ， 否 则 整个 子 树 
痢 将 被 缓存 。 我 们 可 以 在 一 些 先 仿 组 件 、 列 表 组 
件 及 通用 UI 组 件 中 使 用 缓存 组 件 ， 有 利于 皖 升 渔 


来 性 能 。 


2. 流 式 啊 应 


流 式 啊 应 即 服务 需 文 持 以 流 (Streaming) 的 
形式 传输 数据 ， 不 需要 等 待 整个 HTML 都 个 泻 染 
后 再 传输 数据 ， 服 务 问 可 以 做 到 边 泻 染 边 传输 ， 
太 约 服务 佛 内 存 ; 而 客户 闹 则 会 更 早 地 接收 到 页 
面 的 <head> 部 分 ， 即 能 更 早 地 加 载 所 需 的 外 部 资 
源 ， 并 回 用 户 展示 出 页 面 。 服 务 套 文 持 流 式 员 
应 ， 也 需要 演 染 锅 的 配合 ， 而 Vue.js 2.0 中 职 文 持 
这 一 特性 。 我 们 可 以 将 第 11.2.2 小 下 例子 中 的 
serverjs 文 件 做 出 如 下 修改 : 


将 layout 获 取 的 index.html 模 板 拆 分 成 两 段 
HTML.: 


var sections = layout.split('<div id="app"> 
</div>") 

var headerHTML 
var footerHTML 


sections [0 
sections [1] 


修改 处 理 所 有 get 请 求 印 数 为 : 


server.get('*', function (req, res) 


t 

// 利用 vue-server-renderer 提 供 的 泻 染 器 方法 将 Vue 实 例 
作为 流 

Var Stream = 
renderer.renderToStream(require('./static/app') 
()) 

// 将 HTML 头 部 先 写 入 响应 

res.write(headerHTML) 

// 每 当 狐 的 块 被 泻 染 后 束 立 即 写 入 响应 

stream.on('data', function (chunk) { 

res.write(chunk) 


}) 

// 当 所 有 块 个 洽 染 完成 后 ， 将 HTML 尾 部 写 入 响应 

stream.on('end', function () { 
res.end(footerHTML) 


}) 


// 错误 处 理 
stream.on('error', function (error) { 
console.error(error) 
return response 
.Status(500) 
.Send('Server Error') 


我 们 可 以 增加 模板 的 DOM 数 ， 利 用 <li v- 
for=”n in 100000”>{{n}}</i>， 这 样 束 能 比较 明显 
地 对 比 出 来 两 种 泻 染 传输 方式 的 区 别 。 


11.2.4 SPA 实例 


实际 项 目 往往 会 比 上 述 例子 复 洒 得 多 ， 通 当 
会 包含 多 个 页 面 及 组 件 ， 这 样 束 需要 用 到 vue- 
router 玉 进行 路 由 控制 ， 每 次 服务 决 渔 染 组 件 时 ， 
也 都 需要 从 数据 库 中 获取 真实 数据 ; 本 下 主要 从 
0 页 目 中 使 用 服务 闹 渔 染 
仁 忆 局 


1. 入 口 文件 分 离 


从 第 11.2.2 下 中 的 例子 可 以 看 到 服务 顺和 浏 质 
妖 闹 所 使 用 的 Vue.js 的 状态 并 不 相同 ， 服 务 端 需要 
整个 应 用 的 Vue 实 例 ， 浏 换 亏 冰 则 需要 将 Vue 实 例 
挂 载 到 已 滥 染 的 页 面 上 ， 并 获取 当前 的 组 件 状 
仿 ， 建 立 效 据 绑 定 等 行为 当然， 我 们 不 可 能 写 
两 套 组 件 来 分 别 满足 这 两 端的 需求 ， 但 却 可 以 通 
过 不 同 的 入 口 文件 来 进行 不 同 组 件 的 换 作 ， 各 取 


假设 项 目的 结构 如 下 : 


FF- 一 build // webpack 所 需 的 配置 
王 dist  // 编译 后 生成 的 文件 位 置 

src 

| assets  ”// 静态 资源 文件 

i— components // 组 件 位 置 

一 router ”// 路 由 控制 , 一般 用 vue-router 实 现 
i— store // 应 用 状态 管理 和 数据 接口 封装 
Ss 
ls 


views ”// 页 面 组 件 
app.js ”// 根 组 件 
app.vue  // 根 组 件 模 板 
client-entry.js // 浏览 器 端 入 口 文件 
一 server-entry.js // 服务 端 入 口 文件 
上 一 index.htm] 


其 中 client-entry.js 和 server-entry.js 分 别 就 是 两 
交 的 入 口 文件 ，client-entry.js 较 为 简单 ， 代 但 如 
下 : 


require('es6-promise').polyfill()  // 引入 ES6 语 法 
Import { app, store } from './app' 
store.replaceState(window. INITIAL STATE ) // 
获取 当前 应 用 状态 


app.$mount( '#app  ) 


server-entry.js 代 人 码 如 下 : 


import { app, router, store } from './app' 
export default context => { 
router.push(context.url) // 将 router 设 置 成 当前 
环境 下 的 url 
// 手动 匹配 符合 当前 路 由 的 组 件 
return 
Promise.all(router.getMatchedCcomponents().map(com 
ponent => { 
// 组 件 中 需要 定义 preFetch 函 数 ， 用 于 调用 数据 接口 获 
取 真 实数 据 
If (component .preFetch) { 
return component ,preFetch(store ) 


} 
})).then(() => { 
context .initialState = store.,state // 在 上 下 文 


中 保存 应 用 状态 
// 获取 完 数 据 后 ， 返 回 app 实 例 
return app 
}) 
} 


2. 数据 接口 


由 于 前 问 获 取 数 据 利 用 的 是 XMLHttpRequest 
对 象 ， 而 后 端 NodeJS 若 要 发 起 HTTP 请 求 则 需要 
利用 上 自身 的 HTTP 模 块 ， 两 着 的 api 方 式 并 不 完全 
相同 ， 我 们 需要 使 用 一 个 第 三 方 库 将 两 者 的 调用 
方式 封 狐 起 来 ， 使 得 在 浏 唤 吏 喘 的 时 候 能 使 用 
XMLHttpRequest， 而 在 NodeJS 环 境 中 使 用 HTTP 
模块 ， 避 免 重复 编写 两 懈 不 同 的 效 据 请 求 接口 。 


可 以 使 用 第 三 方 库 axios 来 封装 HTTP 请 求 ， 
我 们 的 数据 接口 可 以 写成 如 下 : 


// store/api.js 
import axios from 'axios' 


const defaults = { 
baseURL: '/api/' 
} 


Object.assign(axios.defaults, defaults) 
export const fetchList = () => { 


return axios.get('/items') 


export const fetchDetail = (id) => { 
return axios.get('/items/' + 1d) 


3. 前 后 端 状态 统一 


Tm 


所 谓 前 后 六 状态 统一 ， 其 实 束 古 服 务 闹 完成 
渲染 后 ， 需 要 将 应 用 的 状态 ( 即 获取 的 数据 结 
构 ) 传递 给 前 端的 Vue.js 实 例 ， 使 得 能 够 进行 数据 
哮 定 等 初始 化 行为 。 由 于 用 户 在 麟 蜗 如 闹 十 可 以 
直接 访问 任意 有 效 url 的 ， 也 束 古 说 服务 病 需 要 处 
理 所 有 有 效 请 求 对 应 的 组 件 ， 相 当 于 要 维护 所 有 
组 件 的 状态 ， 所 以 官方 推荐 引入 Vuex 来 管理 整体 
的 组 件 状 在。 具体 涉及 的 代码 如 下 : 


// ./store/index.js 
import Vue from 'vue' 
import Vuex from 'vuex' 


import * as api from './api' 
Vue .use(Vuex) 


const store = new Vuex.Storel(t 


state: { 
list: [], 
detail: {} 
}, 


actions: { 
FETCH_LIST ({ commit, state }) { 
return api.fetchList() 
.then(({data}) => { 
commit('SET_LIST', [ data |]) 
}) 
}, 


FETCH_DETAIL ({ commit, state }, id) 1{ 
return api.fetchDetail(id) 
.then(({data}) => { 
commit('SET_DETAIL', data) 


}) 
} 
}, 
mutations: { 


SET_LIST (state, data) { 
state.1list = data 


}, 


SET_DETAIL (state, data) { 
state.detail = data 


} 


export default store 


app.js 中 需要 使 用 vuex-router-sync， 将 route 对 
象 输 入 到 store 中 ， 使 得 路 由 状态 也 能 侯 退 味 。 


import store from './store' 
import { Sync } from 'vuex-router-sync' 


sync(store, router) // 使 用 方法 很 简单 ， 多 添加 这 一 句 即 可 


在 组 件 内 我 们 需要 这 么 处 理 : 


// views/Detail.vue 
const fetchDetail = Store => { 

return store.dispatch( FETCH_DETAIL ' ， 
store.state.route.params.1d) 


import {mapGetters, mapActions, mapState} from 
'VUEX 
export default { 
computed: mapState({ 
detail : state => state.detail 


) ， 
beforeMount () { 
fetchDetail(this.$store) // 前 端 切换 路 由 到 该 页 面 
时 发 起 数据 请 求 


}, 
preFetch: fetchDetail // 供 后 端 泻 染 时 调用 的 接口 


} 


a 在 前 闹 的 入 口 文 件 dient-entry.js 中 有 这 人 么 一 


store.replaceState(window. _INITIAL_ STATE  ) 


所 以 我 们 在 传输 HTML 中 ， 需 要 将 服务 端 得 
到 的 应 用 状态 利用 script 标 签 传 递 给 window 对 象 ， 
具体 代码 如 下 : 


const context = { url: req.url } 


const renderStream = 
renderer .renderToStream(context ) 
let firstCchunk = true 
renderStream.on('data', chunk => { 
If (firstchunk) { 
// 此 处 的 context 即 是 server-entry.js 传 入 的 context 


// 服务 端 获取 数据 后 ， 会 把 状态 赋值 在 
context .initalState 上 ， 然 后 通过 serialize 序 列 化 状态 传递 
到 window 上 
If (context . InitialState) { 
res.writel( 
'<script>window._ _INITIAL STATE =${ 
serialize(context.initialState, { 
isJSON: true }) 
}</script>" 


firstCchunk = false 
res.write(chunk) 


小 结 


解决 了 上 述 几 个 问题 后 ， 基 本 上 歌 完 成 了 一 
个 可 以 由 后 端 浑 染 的 SPA 项 目 流 程 。 同 样 ， 也 可 


以 利用 webpack 来 搭建 开发 环境 和 编译 可 发 布 代 
位， 具体 的 配置 文件 和 服务 希 代 人 码 可 以 参考 官方 
提供 的 样 例 https:Wgithub.comy/vuejs/vue- 
hackernews-2.0 。 


欢迎 来 到 异步 社区 ! 
异步 社区 的 来 历 


异步 社区 (www.epubit.com.cn ) 是 人 民 邮 电 出 
版 社 底 下 I 专业 图 书 底 舰 社区 ， 于 2015 年 8 月 上 线 
运 冒 。 


1 


异步 社区 依托 于 人 民 邮 电 出 版 社 20 余 年 的 IT 
专业 优质 出 版 资源 和 编辑 党 划 团 队 ， 打 造 传统 
版 与 电子 出 版 和 自 出 版 结合 、 纸 质 书 与 电子 书 结 
合 、 传 统 印 刷 与 POD 按 需 印 刷 结合 的 出 版 平台 ， 
I 为 作者 和 读者 打造 交流 互动 


异步 社区 


4 


近期 活动 + 更 多 
一 了 A = [= ye 和 
异步 社区 成 立 一 周年 大 翅 开 房 一 异步 社区 成 立 一 周年 大 型 娘 书 活动 开启 ! 
异步 社区 的 来 历 异步 社区 是 人 民 邮 电 出 版 社 旗下 
局 年 庆 满 成 促销 | 满 100 元 减 20 元 、 满 150 元 减 35 元 、 满 200 元 减 50 元 + 更 多 | IT 专 , 业 国 书 可 股 社 区 ， 于 2015 年 8 月 上 线 汉 
警 ， 异 步 社区 依托 于 人 民 闻 里 出 乒 社 20 祭 年 的 IT 
专业 -. 
i 因 获 汉 凶 专 性 2016 
一 ~- 一 一 -一 阅读 575 ”推荐 葡 
上 一 iWeb 峰 会 北京 站 即将 开启 , 为 HTML5 征 
! 
i 每 一 次 拍 氏 高 呼 嫩 时 行业 的 影响 ， Dm 
CCIE 路 由 和 交接 认 证 考 数 宫 科 学 实战 手册 软 技 能 : 代 玛 之 外 的 生 Python 宗 友 池塘 全 pi es md , ,8 月 27 日 
试 指南 ( 第 5 版 ) (第 1 (R+python ) 存 指 商 HTML5 姓 人 北京 站 , 我 在 这 里 ,等 你 来， 
塘 HTMLS 亏 怠 ! ,- 
轿 猎 冯 巴 志 教 2016-07-29 
5 用 读 60 推荐 1 收藏 0 评论 0 
SH 
a 每 周 半价 宅 子 书 + 更 全 
和 人 门 与 实 山 Was Ty 
i c= python 和 NS (M2 
Python 游戏 六 程 快速 上 。 宙 器 学 习 项 目 开 发 实战 。 衬 莫 派 Python 编 程 入 门 。 像 计算 机 科学 家 一 栏 思 EE he Blum 拖 知 把, Christine 
主 与 实 上 器 ( 第 2 版 考 Python ( 第 2 版 Bresnahan 布 柔 斯 纳 罕 (作者 ) 陈 谋 明 


马 立 新 ( 译 老 ) 


社区 里 都 有 什么 ? 
购买 图 书 
我 们 出 版 的 图 书 涵盖 主流 IT 技术 ， 在 编程 语 


言 、Web 技 术 、 数 据 科 学 等 领域 有 众多 经 典 畅销 
图 书 。 社 区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 400 多 


种 ， 部 分 新 书 实现 纸 书 、 电 子 书 同步 出 版 。 我 们 
还 会 定期 发 布 新 书 书 讯 。 


下 载 资 源 
社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 
或 程序 源 代码 。 


万 外 ， 竹 区 还 提供 了 大 量 的 免费 电子 书 ， 只 
要 注册 成 为 社区 用 户 吏 可 以 免费 下 载 。 


与 作 译 者 互动 


很 多 图 书 的 作 译 者 已 经 入 狂 社 区 ， 您 可 以 关 
注 他 们 ， 咨 询 技术 问题 ， 可 以 阅读 不 断 更 新 的 技 
术 文 草 ， 听 作 译 者 和 编辑 畅 聊 好 书 痛 后 有 趣 的 政 
事 ; 还 可 以 参与 社区 的 作者 访谈 栏目 ， 同 您 关注 
的 作者 拥 出 采访 题目 。 


灵活 优惠 的 购书 


您 可 以 方便 地 下 竺 购 闫 纸 质 图 书 或 电子 图 
书 ， 纸 质 图 书 直接 从 人 民 邮 电 出 版 社 书库 发 货 ， 
电子 书 提供 多 种 阅读 格式 。 


对 于 重 磅 新 书 ， 社 区 提供 预 售 和 新 书 首发 服 
务 ， 用 户 可 以 第 一 时 间 买 到 心仪 的 新 书 。 


用 户 帐 户 中 的 积分 可 以 用 于 购书 优惠 。100 积 
分 =1 元 ， 购 关 图 书 时 ， 在。 : ea 里 填 入 可 使 用 
的 积分 数值 ， 即 可 扣 减 相应 金额 。 


特别 优惠 


购买 本 电子 书 的 读者 专 享 异 步 社区 优惠 券 。 使 用 方法 : 注册 成 
为 社区 用 户 ， 在 下 单 购书 时 输入 “57AWG ”， 然 后 点 击 “ 使 用 优惠 
码 ” 即 可 享受 电子 书 8 折 优 惠 《本 优惠 券 只 可 使 用 一 次 ) 。 


纸 电 图 书 组 合 购买 


什 区 独家 提供 纸 质 图 书 和 电子 书 组 合 购 关 方 
式 ， 价 格 估 囊 ， 一 次 购 天 ， 多 种 阅读 选择 。 


软 技能 : 代码 之 外 的 生存 指南 
[ 美 ] 约 坦 Z. 森 梅 芯 ( john Z. Sonmez ) (作者 ) 王 小 刚 ( 译 者 ) ” 杨 海 玲 ( 雪 任 编辑 ) 
| 6 9. OK 


人 re 


这 是 一 本 真正 从 “人 ” ( 而 非 按 术 也 非 管 理 ) 的 角度 关注 软件 开发 人 员 已 身 发 展 的 书 。 书 中 论述 的 
内 容 降 涉 及 生活 习惯 ， 又 包括 尽 维 方式 ， 全 时 技术 中 “人 ”的 因素 ， 全 面 潮解 软件 行业 从 业 人 员 所 
需 知 下 的 所 有 “ 软 技能 ”。 

本 书 紧 焦 于 软件 开发 人 员 生 活 的 方方面面 , 从 更 秘 西 试 的 污 程 到 精 耕 绍 作出 一 份 杀手 级 简历 ， 从 创 
建 大 季 欢 迎 的 博 宪 到 打 和 寺 你 的 个 人 品牌 ， 从 提高 合 己 工作 效 至 到 与 如 何 与 “ 沧 延 症 ” 做 斗争 ， 基 至 
包括 如 何 投资 不 动产 ， 如 何 关注 合 己 的 健康 , 


本 书 共 分 为 职业 简 、 自 我 营 轴 简 、 学 习 简 、 生 产 力 简 、 理 财 告 、 健 身 简 、 精 神 镁 等 七 简 , 概括 了 软 
件 行业 从 业 人 员 所 需 的 “ 软 技能 ” 。 


9 纸 质 版 ” 闻 59.99 半 46.02 
电子 版 ”着 35.00 


下 载 PDF 样 章 


电子 版 + 纸 质 版 ”着 59.00 


任 区 里 还 可 以 做 什么 ? 
提交 勘误 
您 可 以 在 图 书页 面 下 方 提交 勘误 ， 每 条 勘误 


被 确认 后 可 以 获得 100 和 积分。 热心 勘误 的 读者 还 有 
机 会 参 与 书稿 的 审 校 和 翻译 工作 。 


写作 


社区 提供 基于 Markdown 的 写作 环境 ， 喜 欢 写 
作 的 您 可 以 在 此 一 试 刁 手 ， 在 社区 里 分 享 您 的 技 


术 心 得 和 读书 体会 ， 更 可 以 体验 目 出 版 的 乐趣 ， 
轻松 实现 出 版 的 梦想 。 


如 果 成 为 社区 认证 作 译 者 ， 还 可 以 至 受 异步 
储 区 提供 的 作者 专 圣 特色 服务 。 


会 议 活动 早 知 过 
您 可 以 掌握 IT 圈 的 技术 会 议 资讯 ， 更 有 机 会 
免费 获 赠 大 会 门票 。 


加 入 异步 
扫描 任意 二 维 码 都 能 找到 我 们 ; 


异步 社区 


微 信服 务 号 


QQ 和 群 : 368449889 


社区 网 址 : www.epubit.com.cn 


官方 微 信 : 异步 社区 


官方 微 博 : @ 人 邮 异 步 社区 ，@ 人 民 邮 电 出 
版 仕 -信息 技术 分 仁 


投稿 & 咨 询 : ”contact@epubit.com.cn 


